React

根据配置生成路由 React路由看似只能由Route组件包裹组件的结构来构成，但是其实也可以通过编写路由数组配置然后通过数组循环来生成Route组件包裹组件的结构。 安装依赖react-router-

@reduxjs/toolkit @reduxjs/toolkit是 redux的进阶版，旨在简化状态管理的开发过程。它不仅包含了 redux的核心功能，还集成了一些最佳实践和工具，使得开发变得更加高

redux处理异步action redux的action是一个普通的 js 对象，每个action对象都有一个type属性表示将要执行的动作，一个payload属性来携带一些额外的数据。但是actio

仓库模块化 在大型应用中，将 Redux 的逻辑模块化是非常重要的，这有助于保持代码的组织性和可维护性。模块化的方式可以通过拆分 reducers来实现。 拆分 reducers 将一个大的 redu

状态管理 React中，没有专门的状态管理库，都是js通用的状态管理库来进行全局的数据存储和管理。 所以在React中要实现状态管理就比较麻烦，首先需要创建一个全局的数据存储和数据管理的工具，然后通过

嵌套路由 在React中嵌套路由是将一个或多个路由组件嵌套在其他路由组件中。通过嵌套路由，我可以在父级路由组件的路径下定义子级路由组件的路径，形成层级结构的路由配置。 使用嵌套路由可以实现以下功能：

react-router的其他重要组件 Navigate组件 Navigate组件用于路由的重定向，当这个组件出现时，就会自动跳转到对应的to属性的路径中。 用于显示默认显示的页面： 根据条件重定向：

异步路由 React做异步路由，需要将React的lazy方法和<Suspense></Suspense>组件配合进行使用。 <Suspense> 组件是 React 中用于处理异步操作一个高级功能。

路由跳转 路由跳转的方式分为标签跳转和编程式跳转。 标签跳转 使用NavLink组件或者Link组件，定义路由组件跳转。 Link组件 Link组件中最重要的属性to，用于设置跳转到的路径。 NavL

react-router的版本 React-router有三个版本： React-router：服务端渲染使用 React-router-dom：浏览器端渲染使用（一般常使用这个） React-rou

React的性能问题 React最大的一个性能问题：React的某个组件的更新（state状态和props属性更新都会让组件更新）会连带着它的子组件一起更新。 解决这个问题的方法： 源码上尽量弥补这个

高阶组件 高阶组件其实就是处理react组件的函数 （组件是将数据转换为 UI，而高阶组件是将组件转换为另一个组件） 。 高阶组件本质是一个函数，它接受一个组件作为参数，并返回一个新的组件。高阶组件并

Context Context类似于Vue中的provider和inject，用于嵌套很深的爷孙组件之间传值，需要逐层传递props或者state时。Context 是一种允许组件之间传递数据的方式，

useRef useRef允许创建一个对元素或值的可变引用，创建的初始值为传入的参数，它的返回值是一个ref对象，这个对象使用.current属性就是该数据的最新值。它通常用于直接访问和管理DOM元素

useCallback useCallback 与 useMemo 类似，它也是用于优化性能的。但是useCallback是用于缓存一个函数，让这个函数不会每次函数组件更新都会重新创建；而useMem

useMemo useMemo作用是让一段代码在开始运行一次，后续只有依赖的数据发生变化时才重新运行。类似于vue的计算属性，它会缓存一个数据，让其不会重新创建。它会将传入的函数的返回结果进行缓存，只

useEffect react的函数组件里面没有生命周期，也没有state，没有state 可以用 useState 来替代。 useEffect可以看作是componentDidMount、comp

Hook React的Hook就是一些React提供的内置函数，这些函数可以让函数组件拥有和类组件一样的组件状态（state）以及模拟类组件的生命周期函数。但是不要什么业务都使用Hook，要在合适的时

函数组件和类组件的区别 函数组件没有生命周期 函数组件没有this 函数组件通过hook来完成各种操作 函数组件本身的函数体相当于render，组件的内容渲染在页面上是通过retrun返回 props

ref 用于获取真实Dom，和vue中的ref一个道理。 注意事项： ref必须在挂载后才能获取，通常在componentDidMount生命周期函数中 ref获取组件只能获取类组件，不能获取函数组件