老生常谈js-react组件生命周期

当我们开发使用 React 时，组件组成了 React 的核心，因此掌握 React 组件的生命周期对于我们来讲至关重要。下面我会详细讲解老生常谈的 JS-React 组件生命周期，并给出两个示例说明。

1. 组件生命周期介绍：

React 组件经历了几个生命周期，包括：

1. 组件创建阶段（Mounting）：该阶段涵盖了组件的创建和初始渲染。此时，React 会调用组件的 constructor，然后调用 getDerivedStateFromProps 方法，最后调用 render 方法进行组件渲染。这一过程是组件的实例化。

2. 组件更新阶段（Updating）：该阶段涵盖了组件更新时，状态或属性发生了改变，从而引起组件重新渲染的过程。在组件更新时，React 会调用 shouldComponentUpdate 方法，然后调用 getDerivedStateFromProps 和 componentWillReceiveProps 方法。如果组件的 prop 或 state 有所改变，React 将会调用 componentWillUpdate 和 componentDidUpdate 方法。

3. 组件卸载阶段（Unmounting）：当组件从 DOM 中被移除时，会执行该阶段，React 会调用 componentWillUnmount 方法。

4. 错误处理（Error handling）：当渲染过程中出现错误时，React 会调用 componentDidCatch 进行处理。

2. 两个示例说明

• 示例1：在组件更新前调用 shouldComponentUpdate 阻止组件不必要的重渲染

在组件更新时，通过 shouldComponentUpdate 生命周期钩子方法，可以判断是否需要重新渲染组件。以下面的代码为例，通过 shouldComponentUpdate 和一个简单的判断函数来判断是否更新。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  render() {
    console.log('Component render');

    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，shouldComponentUpdate 只在 state 的 count 改变时返回 true。这将导致组件在 state 的 count 改变后才进行重渲染。

• 示例2：在组件卸载时执行清理操作

在 React 中，当我们需要进行一些操作，比如清理定时器或其它副作用操作时，需要在组件卸载时执行清理函数，以避免内存泄漏。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.timer = null;
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Interval tick');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    console.log('Component render');

    return (
      <div>
        <h1>Count: {this.state.count}</h1>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，setInterval 在组件挂载后创建定时器，而 componentWillUnmount 会在组件卸载时清除定时器，以避免内存泄漏。

总的而言，掌握 React 组件生命周期非常重要，可以帮助我们在组件的不同生命周期中做出正确的操作，比如在组件渲染前后执行钩子函数，避免不必要的重渲染和内存泄漏等问题。