Xiuji957

创建uni-app项目有两种方式创建uni-app项目： 通过HBuildX可视化界面创建 通过vue-cli命令行创建 这里主要介绍通过vue-cli命令行创建uni-app项目及项目配置的过程。 1234567891011# 安装环境1. node 版本 16+2. pnpm 版本 8.x# 安装vue-clinpm i -g @vue/cli#创建项目npx degit dcloudio/uni-preset-vue#vite 项目名称# vite + tsnpx degit dcloudio/uni-preset-vue#vite-ts 项目名称 注意：如命令行创建失败，请直接访问 gitee 下载模板 更多的注意安装流程和注意事项可以参考官网：uni-app官网 基础项目结构如下： 123456789101112131415161718├── index.html├── package.json├── shims-uni.d.ts├── src│   ├── App.vue│   ├── env.d.ts│   ├── main.ts│   ├── manifest. ...

基于自定义Hook提取公共逻辑自定义 Hook 是一种自然遵循 Hook 设计模式的函数，它可以让开发者将组件逻辑提取到可重用的函数中。当开发者想在不同的组件之间共享一些状态逻辑时，自定义 Hook 非常有用。使用自定义 Hook 可以使组件更加清晰、简洁，同时保持逻辑的可复用性和组织性。 创建自定义 Hook 很简单，你只需要创建一个函数，其名称以 use 开头，然后在该函数内部调用其他 Hook。以下是一个简单的自定义 Hook 的例子： 123456789101112131415161718192021222324252627282930313233343536373839/* * @Description: * @Author: xiuji * @Date: 2024-01-30 09:38:50 * @LastEditTime: 2024-01-30 09:50:25 * @LastEditors: Do not edit */import { useState } from "react";// 批量添加状态，修改状态内指定属性co ...

基于useMemo构建计算缓存useMemo 是一个 React hook，它用于在组件内部缓存计算的结果。当你想要避免在每次渲染时都进行高代价的计算时，这个 hook 就非常有用。useMemo 会在依赖项没有发生变化的情况下，返回缓存的值，避免不必要的计算。 应用场景——复杂逻辑避免每次状态更新重新执行 1234567891011121314151617181920212223242526272829303132333435363738394041424344/* * @Description: * @Author: xiuji * @Date: 2024-01-29 09:40:15 * @LastEditTime: 2024-01-29 15:13:00 * @LastEditors: Do not edit */import { useMemo, useState, useEffect } from "react";const UseMemoDemo = () => { console.log('U ...

useRef和useImperativeHandleuseRef 是 React 提供的一个 Hook，用于在组件的整个生命周期内持久保存一个可变的 ref 对象。它有两个主要的用途： 访问 DOM 节点：使用 useRef 来获取对 DOM 节点的直接引用。这可以用于读取 DOM 信息（如尺寸、位置等）或者调用 DOM API（比如聚焦一个输入框）。 1234567891011121314151617181920212223/* * @Description: * @Author: xiuji * @Date: 2024-01-26 10:34:09 * @LastEditTime: 2024-01-26 10:34:49 * @LastEditors: Do not edit */import React, { useRef } from 'react';const RefDemo = () => { const inputRef = useRef(null); const focusInput = ( ...

useEffect 是 React 中的一个 Hook，它能够在函数组件中执行副作用函数。useEffect 可以被认为是 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。 副作用函数 副作用函数通常是开发者定义的在组件渲染过程中需要执行的那些操作，这些操作会影响组件之外的系统，例如发起API请求、执行手动DOM操作、设置定时器、记录日志、订阅外部数据源等。这些副作用不能在组件的渲染函数中直接执行，因为这样做可能会导致不可预测的行为和性能问题。 在React中，副作用函数通常是指传递给 useEffect Hook 的函数 useEffect的基本使用无依赖执行每次渲染都会执行，等价于componentDidMount和componentDidUpdate 123456789101112131415161718192021222324252627282930313233/* * @Description: * @Author: xiuji * @Date: 2024-01-23 09 ...

React Hooks 是 React 16.8 中引入的新特性，它允许你在不编写类组件的情况下使用状态和其他 React 特性。Hooks 在函数组件中使用，使得函数组件更加强大和灵活。 useStateuseState 是 React 提供的一个 Hook，允许开发者在函数组件中添加状态。在 React Hooks 出现之前，状态只能在类组件中使用。useState 为函数组件提供了类似的功能，让开发者能够在组件中存储和更新值。 useState使用示例123456789101112131415161718192021/* * @Description: * @Author: xiuji * @Date: 2024-01-19 09:34:57 * @LastEditTime: 2024-01-19 09:44:38 * @LastEditors: Do not edit */import { useState } from "react";const Demo = () => { let [count, setCou ...

合成事件React中的合成事件（SyntheticEvent）是对浏览器原生事件的封装，它提供了一个跨浏览器的事件系统，确保你在React中处理事件时拥有一致的体验。React合成事件并非真实的浏览器事件，而是React根据浏览器原生事件构建的跨浏览器的抽象。 合成事件的主要特点包括： 跨浏览器一致性：合成事件封装了原生事件，确保事件对象在不同的浏览器中具有相同的属性和行为。 性能优化：React通过事件委托来管理事件。无论有多少个事件处理器，所有的事件监听都被挂载到最外层的容器上（通常是 root），这种方式避免了大量的DOM事件监听器，这样可以提高性能。 自动清理：React会自动管理合成事件归还和重用，以减少内存占用。 插件系统：React事件可以很容易地通过插件进行扩展。 一个React合成事件的例子： 12345678910class MyComponent extends React.Component { handleClick = (event) => { console.log('Button clicked!' ...

setState后React如何处理更新当组件调用 setState() 更新组件的状态时，React 并不会立即更新组件，而是把这个更新操作放到一个更新队列里（undater）。这就像是在餐厅点菜，服务员先记下顾客的点单，但不是每点一道菜就去厨房一次，而是等顾客点完了所有菜，才把整个订单一起送到厨房。 在某些时候，特别是当组件在很短的时间内多次调用 setState() 时，React 会将这些单独的更新合并成一个大的更新。这样做的好处是效率高：React 可以减少不必要的计算和渲染工作，因为它不需要为每次 setState() 都重新渲染整个组件，只需要根据最终的状态重新渲染一次即可。 React 会选择合适的时机进行这个”厨房制作”过程——也就是更新组件的状态并重新渲染。在这个过程中，它会看看有哪些更新，把它们合并成最终的状态，然后一次性更新组件，而不是一点一点来。 最后，就像服务员将厨房做好的菜端给顾客，React 也会用这个最新的状态来渲染组件的界面，确保看到的内容是最新的。这整个过程让React应用运行得更快，也更流畅。 setState后React依据什么更新内容Reac ...

React与Vue中的RefReact中的ref：在React中，ref是一种特殊属性，它可以附加到任何组件上。ref的主要作用是允许我们直接访问DOM元素或者组件实例。这通常是为了管理焦点、触发强制动画或集成非React的库所必需的。由于React的数据流通常是单向且自顶向下的，因此ref提供了一种逃避这种模式以直接交互的方法。最常见的ref使用场景包括： 管理输入焦点。 触发强制动画。 集成第三方DOM库。 React的ref并不推荐频繁使用，因为它违背了React的声明式编程原则。不过，在无法避免直接操作DOM或组件实例时，ref是一个非常有用的逃生窗。 Vue中的ref：在Vue中，ref也是一个特殊的属性。当它用于HTML元素上时，可以用来获取真实的DOM元素；当它用于组件上时，可以用来获取组件实例。这与React中的ref相似，Vue的ref属性同样用于直接访问DOM节点或子组件的实例。然而，Vue中的ref与数据流动无关，它不依赖于Vue的响应式系统更新。在Vue中，通常可以这样使用ref： 1234567891011<template> <inp ...

静态组件和动态组件静态组件React中的函数组件是无状态的，当在函数组件内部定义一个变量，并尝试在事件处理函数中修改这个变量时，确实，组件内部的变量值会改变，但这个改变不会触发组件的重新渲染，因为它不是一个状态变量。React依赖状态（state）和属性（props）的改变来决定是否需要重新渲染组件。如果这些值不变，React就假定组件输出不需要更新。 举个例子，如果你这样做： 12345678910111213141516171819202122232425262728293031323334353637383940414243/* * @Description: * @Author: xiuji * @Date: 2023-12-07 10:56:02 * @LastEditTime: 2023-12-08 13:55:52 * @LastEditors: Do not edit */import React from "react";import PropTypes from 'prop-types';const ClassCom = ( ...