React的生命周期

 

React的组件生命周期包括以下三个阶段：

 

Mounting（挂载）：组件被创建并插入到DOM中；

Updating（更新）：组件的状态或属性发生变化，导致重新渲染；

Unmounting（卸载）：组件从DOM中删除。

React组件的生命周期方法包括：

 

constructor()：组件被创建时调用，用于初始化状态和绑定方法。

componentWillMount()：组件即将挂载时调用。

render()：组件需要渲染时调用。必须返回一个元素，可以是DOM节点或其他组件。

componentDidMount()：组件挂载完成后调用，通常用于进行异步操作或访问外部资源。

componentWillReceiveProps()：组件接收新的属性时调用。

shouldComponentUpdate()：组件是否需要更新时调用，返回值为布尔类型。

componentWillUpdate()：组件即将更新时调用。

componentDidUpdate()：组件更新完成时调用。

componentWillUnmount()：组件即将卸载时调用，用于清理工作或取消异步任务。

下面是一个简单的React组件示例，演示了使用生命周期方法来更新组件状态：

 

复制代码

import React from 'react';

 

class Counter extends React.Component {

  constructor(props) {

    super(props);

    this.state = { count: 0 };

  }

 

  componentDidMount() {

    this.timerID = setInterval(() => {

      this.setState({ count: this.state.count + 1 });

    }, 1000);

  }

 

  componentWillUnmount() {

    clearInterval(this.timerID);

  }

 

  render() {

    return (

      <div>

        <h1>{this.state.count}</h1>

      </div>

    );

  }

}

 

export default Counter;

这是一个简单的计数器组件，它使用componentDidMount和componentWillUnmount方法来设置定时器并清除定时器。每秒钟，组件的状态会更新一次，并且重新渲染计数器的值。在组件卸载之前，将清除计时器以防止内存泄漏。

 

下面是一个使用React编写的简单页面示例，其中包含了两个组件：Header和Content。

 

复制代码

import React from 'react';

import ReactDOM from 'react-dom';

 

class Header extends React.Component {

  render() {

    return (

      <header>

        <h1>{this.props.title}</h1>

        <nav>

          <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Contact</a></li>

          </ul>

        </nav>

      </header>

    );

  }

}

 

class Content extends React.Component {

  render() {

    return (

      <section>

        <h2>{this.props.subtitle}</h2>

        <p>{this.props.content}</p>

      </section>

    );

  }

}

 

class Page extends React.Component {

  render() {

    return (

      <div>

        <Header title="My Website" />

        <Content subtitle="Welcome to my website" content="This is the homepage of my website." />

      </div>

    );

  }

}

 

ReactDOM.render(<Page />, document.getElementById('root'));

这个页面包含了一个标题和一个内容区域，其中标题由Header组件渲染，内容由Content组件渲染。在Page组件中，我们直接使用了两个子组件，并分别传递了不同的属性值。最终，我们通过ReactDOM将整个页面渲染到HTML文档中的某个元素上