写作目标:梳理react类组件的生命周期是如何被在react 16.8推出的Hooks API实现的,帮助大家在学习使用函数定义组件的过程中少走弯路
阅读内容打卡:
了解react类组件的生命周期,不同生命周期会被调用的函数
了解react函数组件和hooks api如何实现同样的生命周期
了解useEffect函数的定义差异
1.了解react类组件的生命周期,不同生命周期会被调用的函数
生命周期(lifecycle) | 被调用的函数(methods)(按调用顺序) |
mounting | constructor() //定义状态 render() //初次渲染 componentDidMount() //执行副作用 |
updating | render() //再次渲染 componentDidUpdate(prevProps) //执行副作用 |
unmounting | componentWillUnmount() //清理副作用 |
2.了解react函数组件和hooks api如何实现同样的生命周期
生命周期(lifecycle) | 类组件 被调用的函数(methods)(按调用顺序) | 函数组件 被使用的hookapi (按顺序执行) |
mounting | constructor() //定义状态 render() //初次渲染 componentDidMount() //执行副作用 | setState() //定义状态 return //完成初次渲染 useEffect(参数1,参数2) //执行副作用 |
updating | render() //再次渲染 componentDidUpdate(prevProps) //执行副作用 | return //再次渲染 useEffect(参数1,参数2) //执行副作用 |
unmounting | componentWillUnmount() //清理副作用 | 调用useEffect的第1个参数返回的函数 //清理副作用,以防内存泄漏 |
3.useEffect函数的定义差异
定义:useEffect(effectFunction, *DependencyArray)
useEffect一旦被定义了,肯定会在初次渲染,即mounting阶段,被调用
但是否在剩余的生命周期中再次被调用,取决于第2个参数。
![](https://i-blog.csdnimg.cn/blog_migrate/944d3b5c23b037bc5fa7fd61c2082c5c.png)
总结:只有当第2个参数为空数数组([])的时候,useEffect才不会被再次调用,即在组件的整个生命周期中只被调用1次。