react生命周期(旧)

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

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

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

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

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

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

    <script type="text/babel">
      // 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
      // 	1.constructor()
      // 	2.componentWillMount()
      // 	3.render()
      // 	4.componentDidMount() =====> 常用
      // 	  一般在这个钩子中做一些初始化的事, 例如：开启定时器、发送网络请求、订阅消息
      // 2. 更新阶段: 由组件内部this.setSate()或父组件render触发
      // 	1.shouldComponentUpdate()
      // 	2.componentWillUpdate()
      // 	3.render() =====> 必须使用的一个
      // 	4.componentDidUpdate()
      // 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
      // 	1.componentWillUnmount()  =====> 常用
      // 	  一般在这个钩子中做一些收尾的事, 例如：关闭定时器、取消订阅消息

      // 创建组件
      class Count extends React.Component {
        // 构造器
        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();
        };

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

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

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

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

        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("Count---componentWillUpdate");
        }

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

        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>
          );
        }
      }

      // 父组件A
      class A extends React.Component {
        // 初始化状态
        state = { carName: "奔驰" };

        changeCar = () => {
          this.setState({ carName: "奥拓" });
        };

        render() {
          return (
            <div>
              <div>我是A组件</div>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.carName} />
            </div>
          );
        }
      }

      // 子组件B
      class B extends React.Component {
        // 组件将要接收新的props的钩子
        componentWillReceiveProps(props) {
          console.log("B---componentWillReceiveProps", props);
        }

        // 控制组件更新的"阀门"
        shouldComponentUpdate() {
          console.log("B---shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("B---componentWillUpdate");
        }

        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log("B---componentDidUpdate");
        }

        render() {
          console.log("B---render");
          return <div>我是B组件, 接收到的车是:{this.props.carName}</div>;
        }
      }

      // 渲染组件
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>
Prev: 引出生命周期 Next: react生命周期(新)