React 的生命周期

React 的生命周期从广义上分为三个阶段：挂载、渲染、卸载
因此可以把React的生命周期可以分为两类：挂载卸载过程和更新过程。

React 生命周期

HTML 代码 HTML codes

    class StudentJack extends React.Component{
      // 生命周期 - 初始化
      constructor(props) {
        console.log("初始化阶段");
        // 初始化props
        super(props);
        // 初始化状态
        this.state = {
          name: 'jack',
          age: 30
        }

      }
      // 生命周期 - 组件加载前
      componentWillMount() {
        console.log('组件加载前')
      }

      // 生命周期 - 组件加载后
      componentDidMount() {
        console.log('组件加载后')
      }

      // 调用方法
      updateUserInfo = () => {
        // 通过setState 更新state
        this.setState({
          name: "Tim",
          age: 77
        })
      }

      // 生命周期 - 数据是否更新
      shouldComponentUpdate() {
        console.log("数据是否需要更新")
        // 是否更新组件
        return true;
      }

      // 生命周期 - 数据将要更新
      componentWillUpdate() {
        console.log("数据将要更新")
      }

      // 生命周期 - 数据已经更新
      componentDidUpdate() {
        console.log("数据已经更新")
      }

      render() {
        console.log("组件加载或者数据更新")
        return <div>
            <h1>my name is {this.state.name}</h1>
            <p>age: {this.state.age}</p>
            <button onClick={this.updateUserInfo}>更新数据</button>
          </div>
      }
    }