React 类组件转换函数式组件 生命周期参考

261 阅读1分钟

生命周期

函数式组件没有state和生命周期,可以使用useEffect来模拟函数组件的生命周期

constructor

函数组件创建执行时就相当于constructor

shouldComponentUpdate

React.memo和useMemo可以解决,等后面文章整理详解。

render

函数组件的返回值就是render的返回值

componentDidMount

挂载时。 useEffect(() => {}, []) 第二个参数是空数组,只会在组件挂载后运行一次。

componentDidUpdate

更新时 useEffect(() => {}) 或者 useEffect(() => {}, [n]) 第二个参数不写,表示所有state值其中任意一个值变化了都会触发该函数。如果只想某个state值变化了才触发函数,则第二个参数的数组中必须加上要检测更新变化的state值。

componentWillUnMount

卸载时 useEffect(() => {xxxx; return () => {}}, []) 在useEffect的第一个函数中return 一个函数,这个函数就是组件卸载时执行的最后一次代码。 如果useEffect没有依赖或者依赖[m, n],组件更新时也会执行fn,即下一次执行useEffect之前就会执行fn,无论更新还是卸载。