react生命周期(新)

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0
28_react生命周期(新)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3_react生命周期(新)</title>
  </head>

  <body>
    <!-- 准备好一个"容器" -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script
      type="text/javascript"
      src="./js/17.0.1/react.development.js"
    ></script>

    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="./js/17.0.1/react-dom.development.js"
    ></script>

    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="./js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
        //	1.constructor()
        //	2.getDerivedStateFromProps
        //	3.render()
        //	4.componentDidMount() =====> 常用
        //	一般在这个钩子中做一些初始化的事, 例如：开启定时器、发送网络请求、订阅消息

        // 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
        //	1.getDerivedStateFromProps
        //	2.shouldComponentUpdate()
        //	3.render()
        //	4.getSnapshotBeforeUpdate
        //	5.componentDidUpdate()

        // 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        //	1.componentWillUnmount()  =====> 常用
        //	一般在这个钩子中做一些收尾的事, 例如：关闭定时器、取消订阅消息

        // 构造器
        constructor(props) {
          console.log("Count---constructor");
          super(props);
          // 初始化状态
          this.state = { count: 0 };
        }

        // 加1按钮的回调
        add = () => {
          // 获取原状态
          const { count } = this.state;
          // 更新状态
          this.setState({ count: count + 1 });
        };

        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };

        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate();
        };

        // 若state的值在任何时候都取决于props, 那么可以使用getDerivedStateFromProps
        static getDerivedStateFromProps(props, state) {
          console.log("getDerivedStateFromProps", props, state);
          return null;
        }

        // 在更新之前获取快照
        getSnapshotBeforeUpdate() {
          console.log("getSnapshotBeforeUpdate");
          return "atguigu";
        }

        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("Count---componentDidMount");
        }

        // 组件将要卸载的钩子
        componentWillUnmount() {
          console.log("Count---componentWillUnmount");
        }

        // 控制组件更新的"阀门"
        shouldComponentUpdate() {
          console.log("Count---shouldComponentUpdate");
          return true;
        }

        // 组件更新完毕的钩子
        componentDidUpdate(preProps, preState, snapshotValue) {
          console.log(
            "Count---componentDidUpdate",
            preProps,
            preState,
            snapshotValue
          );
        }

        render() {
          console.log("Count---render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为：{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不更改任何状态中的数据, 强制更新一下
              </button>
            </div>
          );
        }
      }

      // 渲染组件
      ReactDOM.render(<Count count={199} />, document.getElementById("test"));
    </script>
  </body>
</html>
Prev: react生命周期(旧) Next: getSnapshotBeforeUpdate的使用场景