2022年年底将近，你的年终总结写好了嘛？哈哈，拿去年的出来抄抄，用了这么久的react，年底就浅浅的总结一下下，撸代码嘛，得思考总结一下下啦，下面开始我的表演~~

1、react 生命周期

1.Initialization：

在这个阶段，组件准备设置初始化状态和默认属性。

2.Mounting：

react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。

3.Updating：

在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。

4.Unmounting：

在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。

除以上四个常用生命周期外，还有一个错误处理的阶段：

Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。

2、Hooks常用的

useEffct使用：

如果不传参数：相当于render之后就会执行

传参数为空数组：相当于componentDidMount

如果传数组：相当于componentDidUpdate（更新执行）

如果里面返回：相当于componentWillUnmount

会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

useLayoutEffect:

useLayoutEffect在浏览器渲染前执行

useEffect在浏览器渲染之后执行

当父组件引入子组件以及在更新某一个值的状态的时候，往往会造成一些不必要的浪费，

而useMemo和useCallback的出现就是为了减少这种浪费，提高组件的性能，

不同点是：useMemo返回的是一个缓存的值，即memoized 值，而useCallback返回的是一个memoized 回调函数。

useCallback

父组件更新子组件会渲染,针对方法不重复执行，包装函数返回函数；

useMemo:

const memoizedValue =useMemo(callback,array)

callback是一个函数用于处理逻辑

array 控制useMemo重新执⾏行的数组，array改变时才会 重新执行useMemo

不传数组，每次更新都会重新计算

空数组，只会计算一次

依赖对应的值，当对应的值发生变化时，才会重新计算(可以依赖另外一个 useMemo 返回的值)

不能在useMemo⾥面写副作⽤逻辑处理，副作用的逻辑处理放在 useEffect内进行处理

自定义hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，

自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性

在我看来，自定义hook就是把一块业务逻辑单独拿出去写。

`const [counter, setCounter] = useState(0);

const counterRef = useRef(counter); // 可以保存上一次的变量`

useRef 获取节点

`function App() {

const inputRef = useRef(null);

return

inputRef.current.focus()}>focus

}`

useContext：跨组件传值

useReducer: useState的加强版，在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。

3、props和state

state是数据结构，只能使用setState来改变

props是组件的属性，由父组件传递给子组件，props是不可以改变的

state是局部的，除了它所在的这个组件其它组件都无法访问

无状态组件:没有设置state的组件(无状态组件通过函数式声明来构建,一个函数就是一个组件)

有状态组件:设置了state的组件(有状态组件通过component来构建，一个子类就是一个组件)

4、类组件和函数组件之间的区别是？

类组件：可以使用其他特性，如状态 state 和生命周期钩子

函数组件：当组件只是接收 props 渲染到页面时，就是无状态组件，也被称为哑组件或展示组件。

区别：

1.类组件有 this，函数组件没有

2.类组件有生命周期，函数组件没有

3.类组件有状态 state，函数组件没有

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

5、什么是高阶组件？

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。高阶组件不是组件，是增强函数，可以输入一个元组件，返回出一个新的增强组件

HOC 可以用于:

1.代码重用、逻辑和引导抽象

2.渲染劫持

3.state 抽象和操作

4.props 处理

6、介绍redux，主要解决什么问题

redux是为了解决react组件间通信和组件间状态共享而提出的一种解决方案，主要包括3个部分，（store + action + reducer）。

store：用来存储当前react状态机（state）的对象。connect后，store的改变就会驱动react的生命周期循环，从而驱动页面状态的改变

action: 用于接受state的改变命令，是改变state的唯一途径和入口。一般使用时在当前组件里面调用相关的action方法，通常把和后端的通信(ajax)函数放在这里

reducer: action的处理器，用于修改store中state的值，返回一个新的state值

主要解决什么问题：1、组件间通信 2、通过对象驱动组件进入生命周期

3、方便进行数据管理和切片

7、React组件通信如何实现?

React组件间通信方式:

1.父组件向子组件通讯:

父组件可以向子组件通过传 props 的方式，向子组件进行通讯

2.子组件向父组件通讯:

props+回调的方式,父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中

3.兄弟组件通信:

找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信

4.跨层级通信:

Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过Context通信再适合不过

5.发布订阅模式:

发布者发布事件，订阅者监听事件并做出反应,我们可以通过引入event模块进行通信

6.全局状态管理工具:

借助Redux或者Mobx等全局状态管理工具进行通信,这种工具会维护一个全局状态中心Store,并根据不同的事件产生新的状态

8、虚拟dom

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

9、diff算法如何比较?

只对同级比较，跨层级的dom不会进行复用

不同类型节点生成的dom树不同，此时会直接销毁老节点及子孙节点，并新建节点

可以通过key来对元素diff的过程提供复用的线索

单节点diff

单点diff有如下几种情况：

key和type相同表示可以复用节点

key不同直接标记删除节点，然后新建节点

key相同type不同，标记删除该节点和兄弟节点，然后新创建节点

10、什么是受控组件？

在HTML当中，像 和 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

11、 什么是高阶组件？

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

    const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下许多用例

代码重用、逻辑和引导抽象

渲染劫持

state 抽象和操作

props 处理