初学React关于生命周期的笔记

react每个组件都包含 “生命周期方法”，表示组件从诞生到消失的过程，我可以使用这些生命周期方法让组件更加全面活动，更加灵动。

react组件诞生顺序-------react 16版本时：

页面初加载

1.constructor()---构造器，在 React 组件挂载之前，会调用它的构造函数。如果不初始化state或不进行方法绑定，则不需要写。

↓

2.componentWillMount()---组件将要挂载时，该名称将继续使用至 React 17。（不常用）

↓

3.render()---组件挂载,此函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。（是必须方法）

↓

4.componentDidMount()---组件挂载完毕调用，如需通过网络请求获取数据，此处是实例化请求的好地方。也比较适合添加订阅的地方。（常用）

↓

5.componentWillUnmount()---组件将要卸载时，会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。（不常用）

页面内容被更新时

setState()---更新状态

↓

6.shouldComponentUpdate()---setState()之后调，一般返回true，根据返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。（不常用）

↓

7.componentWillUpdate()---组件将要更新时，该名称将继续使用至 React 17。（不常用）

↓

render()---组件挂载

↓

8.componentDidUpdate()---组件更新完毕，首次渲染不会执行此方法。（常用）

不通过setState()更新时

9.forceUpdate()----在不更新状态值的时候，强制更新组件，此操作会跳过该组件的 shouldComponentUpdate()。（不常用）

↓

componentWillUpdate()---组件将要更新时

↓

render()---组件挂载

↓

componentDidUpdate()---组件更新完毕

10.componentWillReceiveProps()----父组件重新更新render后，子组件将要接收传参的函数，初始更新的不算，该名称将继续使用至 React 17。（不常用）

react 17新版本后将

componentWillMount()改名为UNSAFE_componentWillMount(),

componentWillUpdate()改名为UNSAFE_componentWillUpdate(),

componentWillReceiveProps()改名为UNSAFE_componentWillReceiveProps()并且逐步弃用。

页面初加载

1.constructor()---构造器

↓

2.static getDerivedStateFromProps(props,state)---在调用render方法之前调用，并且在初始挂载及后续更新时都会被调用，它应返回一个对象来更新state，如果返回null则不更新任何内容。state被更新后无法再被更新。（不常用）

↓

3.render()---组件挂载（必须方法）

↓

4.componentDidMount()---组件挂载完毕调用（常用）

页面内容被更新时

1.setState()---更新状态

↓

2.static getDerivedStateFromProps(props,state)（不常用）

↓

3.shouldComponentUpdate()（不常用）

↓

4.render()（必须方法）

↓

5.getSnapshotBeforeUpdate(prevProps,prevState)---在最近一次渲染输出（提交到DOM节点）之前调用，它使得组件能在发生更改之前从DOM中捕获一些信息（例如：滚动位置）。此生命周期的任何返回值将作为参数传递给componentDidUpdate()（不常用）

↓

6.componentDidUpdate()---组件更新完毕（常用）

以上组件描述的文字大多来自react官网文档