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

关键词:生命周期映射 hooks

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

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

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

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

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

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

  6. getDerivedStateFromProps:useState 可以通过提供 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 函数)