生命周期
函数式组件没有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,无论更新还是卸载。