React 中 render 函数的执行时机

2024-02-23 10:50:58

在刚开始学习 React 的时候，我认为组件的 state 或者 props 改变时，就会触发组件的 render 函数执行。后来我通过一系列的试验发现，state 不改变也可以触发 render 函数的执行，props 改变了也不一定触发 render 函数的执行，下面通过一系列的代码示例来详细介绍 React 中 render 函数的执行时机。

首先，我们来看一个简单的 React 组件：

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

这个组件有两个 props：title 和 content。当这两个 props 的值改变时，都会触发 render 函数的执行。这是因为 React 在检测到 props 发生变化时，会自动调用组件的 render 函数，以便重新渲染组件。

但是，如果我们改变组件的 state，则不会触发 render 函数的执行。这是因为 React 只会在检测到 props 发生变化时才调用 render 函数。为了让组件在 state 改变时重新渲染，我们需要手动调用 this.setState() 方法来更新组件的 state。

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

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

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}