react生命周期

react 的生命周期

react15 的生命周期

constructor(); // 组件构建
componentWillReceiveProps(); // 要接受父组件参数
shouldComponetUpdate(); // 组件是否更新
componentWillMount(); // 组件将要渲染
componentWillUpdate(); // 组件将要更新
componentDidUpdate(); // 组件更新完成
componentDidMount(); // 组件渲染完成
render(); // 渲染
componentWillUnmount(); // 组件将要卸载

生命周期流程为外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
组件第一次挂载的时候： constructor -> componentWillMount -> render -> componentDidMount
组件更新的时候: componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
组件卸载的时候执行: componentWillUnmount

react16

constructor();
getDerivedStateFromProps();
shouldComponentUpdate();
render();
cmoponentDidMount();
componentDidUpdate();
componentWillUnmount();

组件挂载: consturctor -> getDerivedStateFromProps -> render -> componentDidMount
组件更新: getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
组件卸载时执行: componentWillUnmount
react 废弃了 componentWillMount componentWillReceiveProps componentWillUpdate 这三个生命周期钩子函数

各个生命周期函数

consturctor

如果不初始化 state 或者不进行方法绑定，则不需要为 react 组件实现构造函数，在 react 组件挂载之前，会调用他的构造函数，在为 react.conponent 子类实现构造函数的时候，应该在其他语句之前调用 super(props),否则，this.props 在构造函数重会出现没有定义的 bug
用于 1. 通过给 this.state 赋值对象来初始化内部 state 2. 为事件处理函数绑定实例
在 constructor 函数重，不需要使用 setState 方法，如果组件需要使用内部的 state，需要在构造函数中 this.state 赋值初始 state
只会执行一次，调用该方法会换回一个组件实例，在初始化阶段，可以直接对 this.state 赋值，其他生命周期重智能通过 this.setState 修改 state，不能直接对 this.state 赋值。

componentWillReceiveProps

在已经挂载的组件接收到新的 props 的之前调用，可以在这个函数重比较新旧 props，并且根据新旧 props 来更改 state，会破坏 props 数据的单一数据源，在首次渲染逐渐的时候，不会使用这个生命周期，
如果父组件渲染导致了组件的重新渲染，即使传递给组件的 props 没有发生变化，这个组件的生命周期也会发生调用。

getDerivedStateFromProps

是一个静态方法，接受 props 和 state 两个参数，会在调用 render 方法之前被调用，不管是在初始挂载还是在后续组件更新的时候，都会被调用
调用时机和 componentWillMount, commponentWillUpdate, componentWillReceiveProps 一样都是在 render 方法之前调用，可以作为三者的替代方案。
这个方法是类的静态方法，不是原型中的方法，在内部使用 this 访问的不是组件的实例

shouldComponentUpdate

在组件更新之前使用，但是首次渲染或者是 forceUpdate 函数的时候不会调用。当组件的 props 或者是 state 发生变化的时候，会导致组件的更新，在 render 方法之前执行，如果返回值是 false，则不会更新组件，也不会执行后面的 render 方法
接受两个参数，nextProps 和 nextstate，下一次更新的 props 和下一次更新的 state，可以将 this.props 和 nextProps 作比较，返回 false，让组件跳过更新，但是不会阻止组件因为 state 而导致的更新
这个生命周期，可以用来做性能优化

componentWillMount

在组件挂载到 dom 之前调用，并且只会调用一次，在 render 方法执行，可以在 componmentWillMount 中调用 this.setState 不会触发额外的渲染

componentWillUpdate

在组件即将更新之前执行，如果 shouldComponentUpdate 函数返回 false，不会调用 componentWillUpdate 方法

render

render 方法是类组件中的一种必须实现的方法，返回值作为页面渲染的试图，render 函数应该作为纯函数，对于相同的 state 和 props，总是返回相同的渲染结果
render 函数被调用的时候，会返回这四种类型

1. react 元素，jsx 语法
2. 数组或者 fragments: render 方法可以通过数组返回多个元素
3. portals: 渲染子节点到不同的子树中
4. 字符串或者数值：会作为文本节点被渲染
5. boolean 类型或者是 null: 什么都不渲染

getSnapshotBeforeUpdate

这个生命周期在最近一次渲染直提交 dom 之前执行，这个时候 dom 树没有改变，可以在这里获取 dom 改变前的信息。接受两个参数，prevprops, prevstate，上一个状态的 pros 和上一个状态的 state。它的返回值会将传递给 componentDiupdate 的生命周期钩子的第三个参数
需要获取更新前 Dome 的信息时比如说需要使用特殊方法去处理滚动的聊天线程等

componentDidupdate

在组件更新后立即调用,首次渲染不会调用该方法.它的执行时机和 componentdidMount 一致,只是 componentDidmount 在首次渲染的时候调用而 componentdidupdate 是在后续的组件更新时候调用,这个生命周期中可以直接使用 this.set state ,但是必须包含在一个条件语句中否则会导致死循环

componentDidMount

该生命周期方法会在组件挂载之后执行，也就是会执行一次，将组件对应的dom插入到dom树之后调用，在浏览器更新视图之前调用，如果在componentDidMount中直接调用this.setState，会触发额外的渲染，会再一次使用render函数，但是浏览器中更新视图的方法只会执行一次
依赖于dom初始化的操作可以放在这里，也可以在这个生命周期中发送网络请求。

componentWillUnmount

这个生命周期在组件卸载以及销毁之前调用，通常用来执行组件的清理操作