在 React 中，组件的
render方法是在以下情况下被触发的：组件挂载、组件状态或属性更新、父组件重新渲染、调用forceUpdate、组件初始化和卸载，hook的调用。 本文将总结render方法的触发时机以及在每种情况下的应用场景和使用方式。
初始渲染
当组件首次被挂载到DOM中时，render方法会被调用来生成初始的UI结构，通常发生在componentDidMount生命周期方法之前。
js
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。
js
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结构。
js
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没有发生变化。
js
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方法被调用。
js
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。