React生命周期函数图解介绍

下面是详细讲解 “React生命周期函数图解介绍”的完整攻略及示例说明。

1. React生命周期概述

React组件的生命周期是指组件从创建到卸载的整个过程中所经历的一系列阶段，每个阶段都具有相应的生命周期函数，这些生命周期函数可以被称为钩子函数。

React 生命周期分为三大部分

1.1 组件挂载阶段（Mounting）

组件实例被创建并插入 DOM 中，此过程分别是 componentwillmount,render,componentDidMount。

• componentWillMount阶段是组件即将被挂载之前被执行，在react v16版本后已经被废弃，在constructor中完成即可。
• render阶段是将 React 元素渲染成 DOM 节点的过程。
• componentDidMount阶段是组件被挂载到页面之后被执行，通常在这个阶段进行一些dom操作。

示例：

import React, { Component } from 'react';

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

此示例中，使用componentDidMount 生命周期钩子函数，在组件挂载到页面后动态修改了页面 title。

1.2 组件更新阶段（Updating）

当组件的 props 或者 state 发生变化，就会进入组件的更新阶段，此过程分别是：

• getDerivedStateFromProps钩子函数是React v16.3版本以后加入的，在每次重新渲染时（包括组件挂载），都会被调用。
  调用时机为：组件创建，接收到新的props时，state更新时，在此函数中更新组件的state，不要更新其他的东西。

• shouldComponentUpdate函数通常用于性能优化，返回false表示组件不需要重新渲染，一般结合使用PureComponent(React内置的浅层比较props和state的组件)

• render阶段会根据组件最新的props和state重新渲染组件。

• getSnapshotBeforeUpdate在React v16.3版本以后加入的新钩子函数，在更新前的一刻被调用，主要用来获取 DOM 信息，返回值将作为 componentDidUpdate 的第三个参数使用。

• componentDidUpdate阶段是虚拟DOM已经生成并更新到浏览器的DOM中之后被执行，通常在这个阶段进行DOM的操作。

示例：

import React, { Component } from 'react';

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

此示例中，使用componentDidUpdate 钩子函数，在每次组件更新之后，动态修改了页面 title。

1.3 组件卸载阶段（Unmounting）

当组件从 DOM 中移除时，React 就会触发组件的卸载阶段，此过程分别是：

• componentWillUnmount阶段是组件即将被卸载时被执行，此阶段通常进行一些清理工作，例如定时器等，保证组件被彻底卸载。

示例：

import React, { Component } from 'react';

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

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
      </div>
    );
  }
}

此示例中，在组件即将被卸载时使用 componentWillUnmount 钩子函数清除组件中的定时器，保证组件被彻底卸载。

2.总结

总的来说，掌握 React 生命周期很重要，能够帮助我们更好地理解和掌握 React，可以对组件的生命周期进行灵活的操作和控制，提高组件代码质量和可维护性，同时也能够更快地解决 React 应用中的各种问题。

希望这份 Markdown 文档对你有所帮助。