react生命周期(面试不再漏)

react生命周期

• 初始化挂载

// 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
/* 
  两种情况需要
  通过给 this.state 赋值对象来初始化内部 state。
  为事件处理函数绑定实例 
*/
constructor
// 组件即将渲染未渲染时触发
componentWillMount

// render() 是 class 组件中唯一必须实现的方法。
// 当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

// React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent />会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
// 数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
// Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档
// 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
// 布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)
// render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

// 如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。

/* 注意
如果 shouldComponentUpdate() 返回 false，则不会调用 render()。 */

render
// 组件挂载后（插入 DOM 树中）立即调用
compoentDidMount

• 更新时周期

// 只有props发生改变才会触发
componentWillReceiveProps
// 当props发生改变、setState()、forceUpdate()才会触发
// 当继承的是PureComponent组件时，PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。
// 不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。
shouldComponentUpdate
// 只有shouldComponentUpdate返回true时，才会继续下面的生命周期
// 此处为组件即将更新
componentWillUpdate
render
// 组件更新完毕
componentDidUpdate

• 卸载阶段

componWillUnmount

• 错误捕获钩子

componentDidCatch

只能捕获后代组件的异常，如果后代组件中也设置了componentDidCatch，那么距离异常组件最近的上层组件中的componentDidCatch捕获后，将不在继续向上传递类似冒泡事件。

新增生命周期

// 初始挂载及后续更新时都会被调用
static getDerivedStateFromProps(props, state)

// getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
// 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
// 应返回 snapshot 的值（或 null）。
getSnapshotBeforeUpdate(prevProps, prevState)

// 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state
static getDerivedStateFromError(error)

新生命周期图

^react.16.4 生命周期图

• 初始化挂载

constructor
static getDerivedStateFromProps 新
render
componentDidMount

• 更新时

static getDerivedStateFromProps 新
shouldComponentUpdate
render
getSnapshotBeforeUptate 新
componentDidUpdate