[React] 类组件的生命周期, 映射的 hooks 哪些 api ?【热度: 314】

关键词:生命周期映射 hooks

下面是 React 类组件的生命周期方法和对应的 Hooks API:

  1. constructoruseState 可以在函数组件中模拟类组件的 constructor。在函数组件内部使用 useState 声明状态变量,并设置初始值。

  2. componentDidMountuseEffect 用于模拟 componentDidMount。通过在 useEffect 的回调函数中返回一个清理函数,可以模拟 componentWillUnmount

  3. componentDidUpdateuseEffect 可以在函数组件中模拟 componentDidUpdate。通过使用 useEffect 的第二个参数,可以指定依赖项的数组,当依赖项发生变化时,useEffect 的回调函数会被调用。

  4. componentWillUnmountuseEffect 的清理函数可以模拟 componentWillUnmount。在 useEffect 的回调函数中返回一个清理函数,它会在组件销毁时执行。

  5. shouldComponentUpdateReact.memo 可以用于函数组件的性能优化,类似于 shouldComponentUpdate 的功能。React.memo 可以包裹一个组件,并只在组件的 props 发生变化时重新渲染。

  6. getDerivedStateFromPropsuseState 可以通过提供 setter 函数,将 props 的值作为 state 的初始值。在组件重新渲染时,useState 不会重置 state 的值。

并不是每一个生命周期方法都有与之对应的 Hooks API。
Hooks 是为了解决函数式组件的状态管理和副作用问题而引入的新特性,因此 Hooks 在某种程度上替换了类组件的生命周期方法。

下面是一个使用表格方式对比 React 类组件的生命周期方法和对应的 Hooks API:

生命周期方法 Hooks API
constructor useState
componentDidMount useEffect(第二个参数为空数组)
componentDidUpdate useEffect(包含依赖项的数组)
componentWillUnmount useEffect 的清理函数
shouldComponentUpdate React.memo
getDerivedStateFromProps useState(通过提供 setter 函数)