挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

  • **constructor()**
  • [static getDerivedStateFromProps()](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)/**UNSAFE_componentWillMount()**与getSnapshotBeforeUpdate、getDerivedStateFromProps不能共存；
  • **render()**
  • **componentDidMount()**

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

  • [static getDerivedStateFromProps()](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
  • [shouldComponentUpdate()](https://zh-hans.reactjs.org/docs/react-component.html#shouldcomponentupdate)
  • **UNSAFE_componentWillUpdate()**与getSnapshotBeforeUpdate、getDerivedStateFromProps不能共存；
  • **render()**
  • [getSnapshotBeforeUpdate()](https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate)
  • **componentDidUpdate()**


卸载

当组件从 DOM 中移除时会调用如下方法：

  • **componentWillUnmount()** 


  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>React 实例</title>
  7.     <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  8.     <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  9.     <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  10. </head>
  12. <body>
  15.     <script type="text/babel">
  16.         class Hello extends React.Component {
  18.             constructor(props) {
  19.                 console.log('constructor')
  20.                 super(props)
  21.                 this.state = { color: 'red' };
  22.             }
  25.             shouldComponentUpdate(nextProps, nextState) {
  26.                 console.log('shouldComponentUpdate', nextProps, nextState)
  27.                 return true
  28.             }
  32.             /**
  33.              * getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用
  34.              * 可以用在没有ui需要更新时候不更新ui
  35.              */
  36.             getSnapshotBeforeUpdate(prevProps, prevState) {
  37.                 console.log('getSnapshotBeforeUpdate', prevProps, prevState)
  38.                 return null
  39.             }
  41.             /**
  42.              * getDerivedStateFromProps 会在调用 render 方法之前调用，
  43.              * 并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
  44.              */
  45.             static getDerivedStateFromProps(nextProps, prevState) {
  46.                 console.log('getDerivedStateFromProps', nextProps, prevState)
  47.             }
  49.             // 与getSnapshotBeforeUpdate、getDerivedStateFromProps不能共存
  50.             UNSAFE_componentWillMount() {
  51.                 console.log('UNSAFE_componentWillMount')
  52.             }
  54.             // 与getSnapshotBeforeUpdate、getDerivedStateFromProps不能共存
  55.             UNSAFE_componentWillUpdate(nextProps, nextState) {
  56.                 console.log('UNSAFE_componentWillUpdate', nextProps, nextState)
  57.             }
  59.             handleBtnClick() {
  60.                 this.setState({
  61.                     color: this.state.color === 'red' ? 'green' : 'red'
  62.                 })
  63.             }
  66.             render() {
  67.                 console.log('render')
  68.                 return (
  69.                     <div style={{ color: this.state.color }}>
  70.                         {this.props.children}
  71.                         <button onClick={() => this.handleBtnClick()}>
  72.                             btn
  73.                         </button>
  74.                     </div>
  75.                 );
  76.             }
  78.             componentDidMount() {
  79.                 console.log('componentDidMount')
  80.             }
  82.             componentWillUnmount() {
  83.                 console.log('componentWillUnmount')
  84.             }
  85.         }
  87.         ReactDOM.render(
  88.             <div>
  89.                 <Hello name="world">
  90.                     <h1>helloworld</h1>
  91.                 </Hello>
  93.             </div>,
  94.             document.body
  95.         );
  96.     </script>
  98. </body>
  100. </html>

挂载执行了

image.png

变更状态执行了

image.png

参考
文档介绍生命周期
https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops