关键词:生命周期映射 hooks
下面是 React 类组件的生命周期方法和对应的 Hooks API:
-
constructor
:useState
可以在函数组件中模拟类组件的constructor
。在函数组件内部使用useState
声明状态变量,并设置初始值。 -
componentDidMount
:useEffect
用于模拟componentDidMount
。通过在useEffect
的回调函数中返回一个清理函数,可以模拟componentWillUnmount
。 -
componentDidUpdate
:useEffect
可以在函数组件中模拟componentDidUpdate
。通过使用useEffect
的第二个参数,可以指定依赖项的数组,当依赖项发生变化时,useEffect
的回调函数会被调用。 -
componentWillUnmount
:useEffect
的清理函数可以模拟componentWillUnmount
。在useEffect
的回调函数中返回一个清理函数,它会在组件销毁时执行。 -
shouldComponentUpdate
:React.memo
可以用于函数组件的性能优化,类似于shouldComponentUpdate
的功能。React.memo
可以包裹一个组件,并只在组件的 props 发生变化时重新渲染。 -
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 函数) |