如何在父组件改变时阻止不必要的子组件重新渲染？

Question

我当前有一个如下所示的组件：

然而，有时我只想返回：

这可以通过以下方式实现：

if (condition) {
  return ;
}

return (
  
    
  
)

问题在于当 condition 成立（即为 true）时，会重新渲染。这很遗憾，因为中的任何 props 或 state 都没有变化，而且这个组件渲染起来可能相当昂贵。

我倾向于不重写，使其所需内容变为与平级，因为这将是一次大改动。

那么，如何避免在 condition 成立时对进行不必要的重新渲染呢？

我已经尝试使用 React.memo，但效果并未如预期。

Nicol Bolas · Answer

很遗憾，我认为您想要实现的目标可能无法直接达成，但您可以采取一种类似功能的变通方法。换种思路：与其添加和移除子组件（Child）的外层包裹（Parent），不如尝试添加和移除其同级元素。这在本质上是相同的操作。虽然您提到不想修改组件的代码，但我认为这样做并不会对您的代码产生太大影响。

以下是一个示例：

const Parent = ({ children, state }: { children: ReactNode; state: number }) => {
  return (
    <>
      {state % 2 === 0 ? (
        <>
          Sibling 1
          Sibling 2
        
      ) : (
        ""
      )}
      {children}
    
  );
};

如您所见，我没有对整体结构做大幅改动，只是添加和移除了同级元素。
另外，请记得在子组件中使用 useMemo：

const Child = () => {
  const [childState, setChildState] = useState(0);

  return useMemo(() => {
    console.log("Child re-render");
    return (
      
    );
  }, [childState]);
};

在这个例子中，子组件仅应在 childState 改变时重新渲染。如果父组件的状态改变，应仅重新渲染同级元素。以下是完整的代码：

import { ReactNode, useMemo, useState } from "react";

const App = () => {
  const [appState, setAppState] = useState(0);

  return (
    <>
      
      
        
      
    
  );
};

const Parent = ({ children, state }: { children: ReactNode; state: number }) => {
  return (
    <>
      {state % 2 === 0 ? (
        <>
          Sibling 1
          Sibling 2
        
      ) : (
        ""
      )}
      {children}
    
  );
};

const Child = () => {
  const [childState, setChildState] = useState(0);

  return useMemo(() => {
    console.log("Child re-render");
    return (
      
    );
  }, [childState]);
};

export default App;

Quassnoi · Answer

您是否尝试过使用 useMemo？

const child = useMemo(() => , []);

if (condition) return child;

//...