随便扯扯React生命周期 --《爱看不看系列》

Posted 2020-09-30 NickChen

　　生命周期嘛，顾名思义，就是说组件这辈子从生下来到死掉经历的事情。先来看看一张图片，温故温故，如图：

 

你会发现有些周期的名字都能找出点规律，我找到的规律是凡是 Will 字母的，表示该钩子函数会在该生命周期发生之前调用；包含前缀did表示该钩子函数会在该生命周期发生之后调用。

 

大概给生命周期分及各类：

1、Mounting(挂载)

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

上面几个函数会在组件被创建和插入到DOM后调用

 

2、Updating（更新）

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

props 或者 state 的变化都会导致更新。上面这些方法会在 组件 重新渲染时调用。

 

3、Unmounting

1. componentWillUnmount()

该方法将会在 组件 从DOM中移除时调用

 

 

分完类之后就来依次说说各个组件是干什么的咯，怕是每个写react的程序员都会有自己的见解咯。

　　1. componentWillMount()

这个组件个人觉得争议很大，有的人说可以在这个钩子函数内写ajax请求，有的说不行，我还是保持我自己的观念，

不能在里面使用setState方法来更新组件，因为它是在render函数之前执行的，也就是说执行它的时候，DOM节点

是还没有挂在的，强行setState会导致React Component 的 re-render。

　　2. componentDidMount()

这个函数在组件挂在之后执行的，所以比较适合用作初始化DOM节点的操作和AJAX请求。

在该钩子函数里面，可以使用 setState 但是会触发重新渲染 re-render 。　

　　3.componentWillReceiveProps(nextProps)

该钩子函数将会在已挂载组件（mounted component）接收到新的 props 之前调用。适用于更新state的值（重新渲染）

比较this.props和nextProps。有一个要注意的地方就是，props即使没有变化，也会调用这个钩子函数，所以，一般我们的

做法就是比较this.props和nextProps。

　　4.shouldComponentUpdate(nextProps, nextState)

当组件接收到新的 Props 或者 state时，要进行 rendering之前会调用 shouldComponentUpdate()。该钩子函数用于告诉 React 组件是否需要重新渲染。

shouldComponentUpdate() 默认返回 true。

shouldComponentUpdate() 在两种情况下不会被调用：1、初始化渲染；2、使用了forceUpdate（）方法。

但是当 shouldComponentUpdate() 返回 false 的时候，此时 state 发生改变，并不能阻止 child component 进行重新渲染。
但是一旦 shouldComponentUpdate() 返回 false，这就意味着 componentWillUpdate()、 render() 和 componentDidUpdate() 将不再执行。

 

　　5.componentWillUpdate()

state or props 更新后re-render之前调用。
不能在这里调用 setState，如果需要设置 state，应该在 componentWillReceiveProps() 中调用 setState().

 

　　6.componentDidUpdate

在组件更新之后马上调用。在该钩子函数内，你可以：1、操作DOM；2、发起网络请求

 

　　7.componentWillUnmount

在组件卸载和销毁前调用。在该钩子函数内可以做一些清除工作，比如：1、取消定时器；2、取消网络请求；3、绑定DOM事件。