【代码】React 和 Vite 环境下 TailwindCSS 的配置指南。

下文按 hash 模式演示范例，若需切换为 history 模式，只需将 src/main.jsx 中的 createHashRouter 全部替换为 createBrowserRouter 即可。添加参数，以问号 (?) 开始，每个参数由等号 (=) 分隔名称和值，多个参数之间用 (&) 号分隔。在路由配置数组的末尾添加 404 页面的映射，path 值为。当访问到未定义的路由页面时，页面显示 404 页面,即配置子路由，如在首页指定区域渲染子路由的页面。指定子路由页面的渲染位置。

useReducer 可看做升级版的 useState ，其强大之处在于，可以自定义复杂的变量修改逻辑。

current 属性值发生变化，不会触发组件更新渲染（此特征与 useState 不同，useState 声明的变量发生变化，会触发组件更新渲染！组件更新渲染再次执行 useRef（初始值） 时，不会将 current 属性值恢复为初始值（此特征与 useState 相同！修改current 属性值的语句，一般写在 useEffect 或事件处理函数中。创建了一个 current 属性值为 0 的 ref 对象。用于在函数组件中获取对 DOM 元素或自定义组件实例的引用。

用于缓存回调函数，避免在每次渲染时重新创建。接收一个回调函数和依赖项数组，返回缓存后的回调函数。的依赖项参数用于指定哪些变量的变化会导致生成新的回调函数。在这个例子中，缓存了回调函数，并且指定了依赖项数组为[count]。这意味着只有当count发生变化时，才会生成新的回调函数。

注意事项：若 userInfo 是用 useState 声明的响应式变量，则内存地址不会重新生成，所以不会引发子组件的重新渲染。memo() 函数的本质是通过校验Props中数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。每次父组件重新渲染时，引用类型的数据 userInfo 的内存地址都会重新生成，导致子组件重新渲染。父组件向子组件传递了引用类型的数据，但仍想缓存子组件，则需使用 useMemo。为什么添加了 memo ,子组件2依然重新渲染了呢？因为父组件向子组件2传递了引用类型的数据。

【代码】React 学习——Context机制层级组件通信。

react父子组件通信

React+Vite+eslint+ts搭建框架及基础配置

useState用于在函数组件中添加状态。返回一个包含当前状态值和更新状态值的数组。与vue的响应式原理不同，vue通过proxy劫持数据的getter和setter实现响应式，如vue3的reactive()State的创建使用了 const [变量名，变量setter] = useState(初始值) 的形式定义响应式数据State是隔离且私有的渲染多个相同组件，其state值是独立的，不受其他组件的影响。渲染和提交应用启动时进行第一次渲染，届时所有组件和节点都会进行渲染；

这个依赖项数组的目的是帮助 Reac t优化性能，确保副作用函数仅在依赖项发生变化时执行，而不是在每次渲染时都执行。清除副作用的逻辑，写在 useEffect 内回调函数的 return 后面，需要注意的是，return 后必须是一个函数！如果省略依赖项数组，副作用函数将在每次组件重新渲染时都执行，这可能导致性能问题和不必要的副作用。如果依赖项数组不为空，副作用函数将在组件挂载时执行一次，并在依赖项发生变化时执行。如果依赖项数组为空，副作用函数仅在组件挂载和卸载时执行，相当于类似于类组件中的。