组件 Re-render 时会重新执行整个函数，包括：

• 变量声明
• 函数创建
• console.log()
• 计算操作
• useState 变量不会重置（React 记住 state 的值）

<aside> 💡

React 通过 virtual DOM diffing 机制对比新旧 JSX, 只更新变化的部分, 不会修改整个 DOM

</aside>

Re-render 触发条件

• state 发生变化
• props 发生变化
• 父组件 Re-render，默认情况下子组件也会 Re-render（即使 props 没变）

优化 Re-render

React.memo()

用于优化子组件，当 props 没有变化时，防止子组件不必要的 Re-render。

const Child = React.memo(() => {
  console.log("Child re-rendered!");
  return <p>I'm a child</p>;
});

• 适用于纯 UI 组件，props 变化不频繁的情况。
• 如果 props 是对象或函数，可能仍然会触发 Re-render，需要搭配 useMemo() 或 useCallback() 进行优化。

副作用管理

useEffect()

适用于事件监听、API 请求、订阅等副作用，避免副作用在每次 Re-render 时都执行：