关键词:生命周期映射 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 函数) |