前端面试宝典

组件的生命周期

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      var Demo = React.createClass({
        getDefaultProps: function () {
          console.log("获取默认属性值");
          return {
            name: "world",
          };
        },
        getInitialState: function () {
          console.log("初始化状态值");
          return {
            isSelect: false,
          };
        },
        componentWillMount: function () {
          console.log("将要挂载组件");
        },
        render: function () {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        },
      });

      //第一个渲染组件
      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));
    </script>
  </body>
</html>

静态属性替代getDefaultProps

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      class Demo extends React.Component {
        // 替代getDefaultProps（React 16中通过静态属性定义默认props）
        static defaultProps = {
          name: "world",
        };

        constructor(props) {
          super(props);
          // 初始化state（替代getInitialState）
          this.state = {
            isSelect: false,
          };
          console.log("初始化状态值");
        }

        // 替代componentWillMount（挂载前操作移至constructor）
        componentDidMount() {
          console.log("组件已挂载");
        }

        render() {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        }
      }

      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));
    </script>
  </body>
</html>

使用ES6 Class替代React.createClass

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      // 使用ES6 Class替代React.createClass
      class Demo extends React.Component {
        // 静态属性替代getDefaultProps
        static defaultProps = {
          name: "world",
        };

        constructor(props) {
          super(props);
          // 初始化state替代getInitialState
          this.state = {
            isSelect: false,
          };
        }

        render() {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        }

        componentDidMount() {
          console.log("已经挂载组件");
        }

        shouldComponentUpdate() {
          console.log("是否可以更新组件");
          return true;
        }

        componentDidUpdate() {
          console.log("已经更新组件");
        }
      }

      // 第一个渲染组件
      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));

      // 重新渲染组件
      ReactDOM.render(<Demo name="四儿" />, document.getElementById("example"));
    </script>
  </body>
</html>

componentWillUnmount在React 16中仍可安全使用，无需修改

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      // 使用ES6 Class组件替代React.createClass
      class Demo extends React.Component {
        // 静态属性定义默认props，替代getDefaultProps
        static defaultProps = {
          name: "world",
        };

        constructor(props) {
          super(props);
          // 在构造函数中初始化state，替代getInitialState
          this.state = {
            isSelect: false,
          };
        }

        render() {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        }

        componentDidMount() {
          console.log("已经挂载组件");
        }

        shouldComponentUpdate() {
          console.log("是否可以更新组件");
          return true;
        }

        componentDidUpdate() {
          console.log("已经更新组件");
        }

        // componentWillUnmount在React 16中仍可安全使用，无需修改
        componentWillUnmount() {
          console.log("将要移除组件");
        }
      }

      // 第一个渲染组件
      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));

      // 重新渲染组件（会触发前一个组件的卸载和新组件的挂载）
      ReactDOM.render(<Demo name="四儿" />, document.getElementById("example"));
    </script>
  </body>
</html>

UNSAFE_componentWillMount

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      // 使用ES6 Class组件替代React.createClass
      class Demo extends React.Component {
        // 静态属性定义默认props，替代getDefaultProps
        static defaultProps = {
          name: "world",
        };

        constructor(props) {
          super(props);
          // 在构造函数中初始化state，替代getInitialState
          this.state = {
            isSelect: false,
          };
        }

        // React 16中该方法被标记为不安全，添加UNSAFE_前缀
        UNSAFE_componentWillMount() {
          console.log("将要挂载组件");
        }

        render() {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        }

        componentDidMount() {
          console.log("已经挂载组件");
        }

        shouldComponentUpdate() {
          console.log("是否可以更新组件");
          return true;
        }

        componentDidUpdate() {
          console.log("已经更新组件");
        }

        // componentWillUnmount在React 16中仍可安全使用，无需修改
        componentWillUnmount() {
          console.log("将要移除组件");
        }
      }

      // 第一个渲染组件
      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));

      // 重新渲染组件（会触发前一个组件的卸载和新组件的挂载）
      ReactDOM.render(<Demo name="四儿" />, document.getElementById("example"));

      // 移除组件
      ReactDOM.unmountComponentAtNode(document.getElementById("example"));
    </script>
  </body>
</html>

组件的生命周期完整过程

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>组件的生命周期</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      //组件的生命周期: 从创建组件到组件移除的完整的过程

      //React组件的生命周期,分为三个阶段
      //1.挂载阶段(Mounting): 把组件插入元素中
      //2.更新阶段(Update): 重新渲染组件
      //3.移除阶段(Unmounting): 从元素中移除组件

      // 使用ES6 Class组件替代React.createClass，符合React 16规范
      class Demo extends React.Component {
        // 静态属性定义默认props，替代getDefaultProps
        static defaultProps = {
          name: "world",
        };

        constructor(props) {
          super(props);
          // 在构造函数中初始化state，替代getInitialState
          console.log("初始化状态值");
          this.state = {
            isSelect: false,
          };
        }

        // React 16中该方法被标记为不安全，添加UNSAFE_前缀
        // 建议将相关逻辑移至constructor或componentDidMount
        UNSAFE_componentWillMount() {
          console.log("将要挂载组件");
        }

        render() {
          console.log("渲染组件");
          return <h1>Hello, {this.props.name}!</h1>;
        }

        componentDidMount() {
          console.log("已经挂载组件");
        }

        // React 16中该方法被标记为不安全，添加UNSAFE_前缀
        // 推荐使用static getDerivedStateFromProps替代
        UNSAFE_componentWillReceiveProps() {
          console.log("将要接收到属性值");
        }

        shouldComponentUpdate() {
          console.log("是否可以更新组件");
          return true;
        }

        // React 16中该方法被标记为不安全，添加UNSAFE_前缀
        // 推荐使用getSnapshotBeforeUpdate替代
        UNSAFE_componentWillUpdate() {
          console.log("将要更新组件");
        }

        componentDidUpdate() {
          console.log("已经更新组件");
        }

        // componentWillUnmount在React 16中仍可安全使用，无需修改
        componentWillUnmount() {
          console.log("将要移除组件");
        }
      }

      //第一个渲染组件
      ReactDOM.render(<Demo name="三儿" />, document.getElementById("example"));

      //重新渲染组件
      ReactDOM.render(<Demo name="四儿" />, document.getElementById("example"));

      //移除组件（保持注释状态，与原代码一致）
      //ReactDOM.unmountComponentAtNode(
      //    document.getElementById('example')
      //);
    </script>
  </body>
</html>