Function Components 重新执行与子元素渲染

在 React 中，当一个 function component 重新执行时，它的子元素是否重新渲染取决于几个因素：

默认行为

默认情况下，当一个 function component 重新渲染（重新执行）时，它的所有子组件也会重新渲染，无论这些子组件的 props 是否发生了变化。这是 React 的默认渲染机制。

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        增加计数: {count}
      </button>
      <Child /> {/* Parent 每次重新渲染，Child 也会重新渲染 */}
    </div>
  );
}

function Child() {
  console.log("Child 渲染了");
  return <div>Child 组件</div>;
}

优化方法

React 提供了几种方式来避免不必要的子组件重新渲染：

1. React.memo

使用 React.memo 高阶组件可以记忆化一个组件，只有当组件的 props 发生变化时才会重新渲染：

const MemoizedChild = React.memo(function Child() {
  console.log("Child 渲染了");
  return <div>Child 组件</div>;
});

2. useMemo

对于复杂的子元素，可以使用 useMemo 来记忆化：

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

  // 只有依赖项变化时才会重新创建子元素
  const memoizedChild = useMemo(() => <Child />, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        增加计数: {count}
      </button>
      {memoizedChild}
    </div>
  );
}

3. 使用 children props

将子组件作为 props 传入可以避免重新创建子组件：

function Container({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        增加计数: {count}
      </button>
      {children} {/* children 不会因为 Container 重新渲染而重新渲染 */}
    </div>
  );
}

// 使用
<Container>
  <Child />
</Container>

总结

• 默认情况下，父组件重新渲染会导致所有子组件重新渲染
• 使用 React.memo、useMemo 和 children props 等方式可以避免不必要的子组件重新渲染
• 合理使用这些优化方法对于提高应用性能尤为重要，特别是在子组件渲染开销较大的情况下