在 React 中，组件的 render 方法是在以下情况下被触发的：组件挂载、组件状态或属性更新、父组件重新渲染、调用 forceUpdate、组件初始化和卸载，hook的调用。 本文将总结render 方法的触发时机以及在每种情况下的应用场景和使用方式。

初始渲染

当组件首次被挂载到DOM中时，render方法会被调用来生成初始的UI结构，通常发生在componentDidMount生命周期方法之前。

import React from 'react';

class ExampleComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount!');
  }

  render() {
    console.log('Render method executed!');
    return <div>Component mounted!</div>;
  }
}

export default ExampleComponent;

componentDidMount表示ui的挂载完成，render是在挂载ui，所以可以看到render是比componentDidMount先执行的

props或state的变化：

如果组件的props或state发生变化，React会重新调用render方法来根据新的props和state生成新的UI结构。这样可以确保组件能够根据外部数据的变化及时更新UI。

import React from 'react';

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

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

  render() {
  console.log('Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Increase Count</button>
        <div>Count: {this.state.count}</div>
      </div>
    );
  }
}

export default ExampleComponent;

初始化渲染的时候render了一次，当再去调用函数通过setState去改变state的时候，render会再次调用

父组件重新渲染：

如果组件的父组件重新渲染，或者父组件的props发生变化，可能会导致子组件的render方法被调用，去生成新的UI结构。

import React from 'react';

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

  handleClick = () => {
    this.setState({ parentCount: this.state.parentCount + 1 });
  }

  render() {
  console.log('Parent Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Increase Parent Count</button>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
  console.log('Child Render method executed!');
    return <div>Child component</div>;
  }
}

export default ParentComponent;

第一次渲染的时候父子的render都会触发，当我们去点击增加函数的时候，随着父组件的render触发，子组件的render也会进行触发。

强制更新：

在某些情况下，可能需要手动触发组件的重新渲染。可以使用forceUpdate方法来强制触发组件的render方法，即使组件的props和state没有发生变化。

import React from 'react';

class ExampleComponent extends React.Component {
  handleClick = () => {
    this.forceUpdate();
  }

  render() {
    console.log('Parent Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Force Update Component</button>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    console.log('Child Render method executed!');
    return <div>Component will be forced to update!</div>;
  }
}

export default ExampleComponent;

使用React Hooks时的变化：

当使用React Hooks（如useState、useEffect等）时，组件内部的状态发生变化或触发副作用时，也会导致组件的render方法被调用。

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  console.log('Render method executed!');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

export default ExampleComponent;

函数组件中的 return 语句可以被视为相当于类组件中的 render 方法。在函数组件中，return 语句用于返回 JSX 元素，定义了函数组件要渲染的内容。当函数组件被调用时，它会执行函数体内的代码，并返回 return 语句的内容，这个内容会被 React 渲染成真实的 DOM 元素。

函数组件中return就相当于render的操作，可以看到当我们使用钩子函数的时候，每次对state的改变，也会触发整个函数的render。

总结

render在初始化和state的改变时候会触发，当render在子组件中的时候，父组件的更新和强制更新都会触发render，并且在函数组件中，retrun相当于render，当调用useState等hooks的时候会触发render。

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

往期好文推荐