react lifeCycle
本文将从 函数式组件“生命周期”与类式组件生命周期对比介绍 执行流程参考react官网生命周期谱图:
图片来源:https://react.docschina.org/
类组件
挂载阶段
constructor:
super(props) 传递props,才能在接下来的上下文中,获取到props
1.初始化 state ,比如可以用来截取路由中的参数,赋值给 state
2.对类组件的事件做一些处理,比如绑定 this, 节流,防抖等
3.对类组件进行一些必要生命周期的劫持,渲染劫持
getDerivedStateFromProps(nextProps,prevState):
nextProps:父元素新传递的props,prevState:组件在此次更新前的state
接收父组件的props数据, 可以对props进行格式化,过滤等,返回值将作为新的state合并到state中。
render:
将jsx的各个元素被React.createElement创建成React element对象的形式,及创建React.element元素的过程
componentDidMount:
- 可以做关于DOM操作,比如基于dom的事件监听器
- 对于初始化向服务器请求数据,渲染视图。
更新阶段
(1.父元素传入props改变,调用setState,调用forceupdate):
componentWillReceiveProps:
监听父组件的是否执行render
根据父元素props改变,来决定是否更新state
getDerivedStateFromProps(nextProps,prevState):
nextProps:父元素新传递的props,prevState:组件在此次更新前的state
接收父组件的props数据, 可以对props进行格式化,过滤等,返回值将作为新的state合并到state中。
shouldComponentUpdate(newProps,newState,nextContext):
一般用于性能优化,shouldComponentUpdate的返回值决定是否重新渲染类组件
render:
将jsx的各个元素被React.createElement创建成React element对象的形式,及创建React.element元素的过程。
getSnapshotBeforeUpdate(prevProps,preState):
配合componentDidUpdate一起使用,计算形成一个snapShot传递给componentDidUpdate。保存一次更新前的信息。
componentDidUpdate(prevProps, prevState, snapshot):
componentDidUpdate 生命周期执行,此时 DOM 已经更新,可以直接获取 DOM 最新状态
接受 getSnapshotBeforeUpdate 保存的快照信息。
卸载阶段:
componentWillUnmount:
组件销毁阶段,比如清除一些可能造成内存泄漏的定时器,或者事件监听器
clearTimeout(this.timer);
this.node.removeEventListener(‘click’,this.handerClick) // 卸载事件监听器
函数式组件
1.函数式组件中的使用生命周期函数方法的替代方案:
useEffect
useEffect (componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合)和useLayoutEffect执行代替类组件中生命周期的钩子。
useEffect (()=>{
},dep)
第一个参数是callback,定义组件每次更新时产生的副作用,第二个参数是依赖项,是一个数组,可以有多个依赖项,当依赖项改变,执行callback回调函数。 对于useEffect 是在视图绘制完毕,才执行,因此effect的回调函数不会阻塞浏览器绘制视图。
useLayoutEffect
useLayoutEffect 是在DOM绘制之前,更新产生的副作用,是同步执行的,因此会阻塞浏览器绘制。 useEffect 和 useLayoutEffect:修改 DOM,改变布局就用 useLayoutEffect,其他情况就用 useEffect 。
- useEffect(()=>{
//请求 数据,事件监听, 操作dom
return function componentWillUnmount(){
// 解除事件监听器,清除定时器
}
},[])
当传入的依赖项是空数组时,useEffect第一参数的回调函数相当于componentDidMount, 而回调函数的返回函数,可以作为componentWillUnmount使用。
参考文章:https://juejin.cn/book/6945998773818490884 《React进阶实践指南》