React 组件渲染三次的深入解析
在 React 应用开发中，组件的重新渲染是常见现象。本文将分析一个特定场景：点击按钮后，render 函数为何执行三次？这与我们通常预期的两次渲染（一次初始渲染，一次状态更新）有所不同。
问题描述
在一个简单的 React 应用中，点击按钮触发了三次 render 函数调用。这并非预期行为。下图展示了组件状态变化过程：（此处应插入示例图示，但由于无法处理图片上传，请参考原文的图示）
原因分析
-
初始挂载渲染: 组件首次挂载到 DOM 时，render 函数被调用一次，这是正常的初始渲染过程。
-
状态更新触发渲染: 点击按钮改变组件状态（例如，计数器加一），触发第二次 render 函数调用，这是由于状态变化导致的组件重新渲染。
-
父组件重新渲染的级联效应: 第三次回调很可能是由于父组件的重新渲染导致的。在 React 中，父组件重新渲染时，其所有子组件都会重新渲染，无论子组件的状态是否发生变化。这除非使用
React.memo或useMemo等优化策略，否则是 React 的默认行为。
代码示例及解释
考虑一个简单的计数器组件：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
}
export default Counter;
点击按钮更新 count 状态，触发第二次渲染。如果 Counter 是另一个组件的子组件，而父组件同时更新了状态或 props，则父组件的重新渲染将导致 Counter 再次渲染，从而出现第三次 render 调用。
结论与优化
render 函数执行三次的原因是初始渲染、状态更新和父组件重新渲染的组合结果。为了避免不必要的渲染，可以使用 React.memo 或 useCallback 来优化组件的重新渲染行为，提高应用性能。 React.memo 可以通过浅比较 props 来避免不必要的重新渲染，而 useCallback 可以避免不必要的函数重新创建，从而减少不必要的重新渲染。 此外，合理设计组件结构，减少不必要的父组件状态更新，也能有效降低渲染次数。
