React 生命周期可以分为三部分
生命周期16.4
一、挂载时
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下:
constructor()-
static getDerivedStateFromProps()(不常用) render()componentDidMount()
二、更新时
-
static getDerivedStateFromProps()(不常用) -
shouldComponentUpdate()(不常用) render()-
getSnapshotBeforeUpdate()(不常用) componentDidUpdate()
三、卸载时
componentWillUnmount()
下面是生命周期的简介
constructor()
在
React组件挂载之前，会调用它的构造函数。
如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数。
注意⚠️在为React.Component子类实现构造函数时，应在其他语句之前前调用super(props)。否则，this.props在构造函数中可能会出现未定义的bug
getDerivedStateFromProps(props, state)
getDerivedStateFromProps会在调用render方法之前调用。
并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回null则不更新任何内容。
render()
render()方法是class组件中唯一必须实现的方法
render()函数应该为纯函数，这意味着在不修改组件state的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互
注意⚠️如需与浏览器进行交互，请在componentDidMount()或其他生命周期方法中执行你的操作。保持render()为纯函数，可以使组件更容易思考
componentDidMount()
componentDidMount()会在组件挂载后（插入 DOM 树中）立即调用。
此时Virtual DOM渲染完成。
此方法只会初始化一次，依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在componentWillUnmount()里取消订阅。
shouldComponentUpdate(nextProps, nextState)
此方法仅作为性能优化的方式而存在。
根据shouldComponentUpdate()的返回值(true: 执行render(),false:不重新渲染)，判断React组件的输出是否受当前state或props更改的影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
不要企图依靠此方法来“阻止”渲染，因为这可能会产生bug。你应该考虑使用内置的PureComponent组件，而不是手动编写shouldComponentUpdate()
注意⚠️后续版本，React 可能会将shouldComponentUpdate视为提示而不是严格的指令，并且，当返回false时，仍可能导致组件重新渲染。
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate()在最近一次渲染输出（提交到 DOM 节点）之前调用。
它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
此生命周期的任何返回值将作为参数传递给componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
应返回snapshot的值（或null），返回值会在componentDidUpdate(prevProps, prevState, snapshot)中的第三个参数。
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()会在更新后会被立即调用。
首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。
componentWillUnmount()
componentWillUnmount()会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除timer，取消网络请求或清除在componentDidMount()中创建的订阅等。
网友评论