react生命周期笔记

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：

1. 可以做关于DOM操作，比如基于dom的事件监听器
2. 对于初始化向服务器请求数据，渲染视图。

更新阶段

(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 。

2. useEffect(()=>{
   //请求 数据,事件监听, 操作dom
   return function componentWillUnmount(){
   // 解除事件监听器,清除定时器
   }
   },[])

当传入的依赖项是空数组时,useEffect第一参数的回调函数相当于componentDidMount, 而回调函数的返回函数,可以作为componentWillUnmount使用。

参考文章：https://juejin.cn/book/6945998773818490884 《React进阶实践指南》