React生命周期和钩子函数

一、React生命周期

React生命周期可以分为三个阶段：挂载阶段（Mounting）、更新阶段（Updating）、卸载阶段（Unmounting）。

1、挂载阶段（Mounting）

组件实例被创建并插入到DOM中，依次执行constructor()、render()和componentDidMount()

• constructor()：用于初始化state和绑定事件处理函数等。
• render()：根据当前的状态和属性渲染UI。
• componentDidMount()：在组件挂载完成后立即调用，适合执行网络请求或DOM操作等。

2、更新阶段 （Updating）

组件的props或state发生变化时，组件会重新渲染。依次执行render()、shouldComponentUpdate()（可选）、componentWillUpdate()（可选）、getDerivedStateFromProps()（可选，React 16.3引入）、getSnapshotBeforeUpdate()（可选，React 16.3引入）和componentDidUpdate()

• shouldComponentUpdate()：返回一个布尔值，用于判断组件是否需要更新。
• componentWillUpdate()：在组件即将更新之前调用。
• getDerivedStateFromProps()：在接收到新的props时更新state。
• getSnapshotBeforeUpdate()：在最近一次渲染输出（提交到DOM节点）之前调用，用于捕获一些信息（例如滚动位置）。
• componentDidUpdate()：在组件更新完成后立即调用，适合执行DOM操作或更新依赖于DOM的操作。

3、卸载阶段（Unmounting）

组件从DOM中移除，执行componentWillUnmount()

• componentWillUnmount()：在组件即将卸载和销毁之前调用，适合执行清理工作，如取消网络请求、清除计时器等。

二、React钩子函数

 由于生命周期函数只能在类组件中使用，React Hooks是React 16.8引入的特性，允许函数组件使用state和其他React特性。

1. useState：

   • 用于在函数组件中添加state。
   • 返回一个状态变量和一个更新该状态的函数。

2. useEffect：

   • 用于在函数组件中执行副作用操作（例如数据获取、订阅或手动更改React组件中的DOM）。
   • 可以看作componentDidMount、componentDidUpdate和componentWillUnmount这三个生命周期方法的组合。
   • 接受一个函数和一个依赖项数组作为参数。当依赖项发生变化时，函数会重新执行。

3. useLayoutEffect：

   • 其用法与useEffect相同，但会在所有的DOM变更之后同步调用，可以用于读取DOM布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect内部的更新计划将被同步刷新。

4. useContext：

   • 用于让你在函数组件中能够订阅React上下文（Context）。

5. useReducer：

   • 是useState的替代方案，它接收一个reducer函数和初始状态作为参数，并返回一个state变量和dispatch函数。

6. useCallback：

   • 返回一个记忆化的回调函数版本，该回调函数在依赖项不变的情况下不会改变。

7. useMemo：

   • 返回一个记忆化的值。它仅会在某个依赖项改变时重新计算该记忆化的值。对于执行开销较大的计算时很有用。

8. useRef：

   • 可以在整个组件的生命周期内保持不变。
   • .current属性被初始化为传递给useRef()的参数。该对象在组件的整个生命周期内保持不变。

9. useImperativeHandle：

   • 自定义使用forwardRef时暴露给父组件的实例值。

10. useDebugValue：

    • 用于在React开发者工具中显示自定义的label。它可以帮助你在开发者工具中更容易地识别自定义hooks。