React组件条件渲染最优方式探讨：两种实现方案该选哪种？

一、两种实现方式的差异与你的判断验证 #

1. 方式一：父组件控制渲染 #

当isRender为false时，<MyComponent />不会被实例化，组件内部的hooks、处理函数、副作用逻辑完全不会执行——你的这个判断是正确的。
这种方式适合：

• 子组件包含大量初始化逻辑、副作用（比如useEffect请求数据），不想在不需要时触发这些操作
• 渲染条件由父组件的多个状态共同决定，放在父组件控制更清晰

2. 方式二：子组件内部控制渲染 #

当传入isRender={false}时，子组件已经被实例化了，内部的useState、useEffect等hooks会正常执行，直到遇到return null。如果组件内部有复杂逻辑，确实会产生不必要的执行——你的这个想法也是正确的。
这种方式适合：

• 子组件本身轻量，没有复杂逻辑或副作用
• 需要保留子组件的状态（比如切换显示/隐藏时，不想重置内部的useState数据）

二、React官方的推荐逻辑 #

React官方没有绝对的“最佳方案”，核心原则是根据组件职责、复杂度、状态需求选择：

• 若想彻底避免子组件的逻辑执行，优先用方式一，让父组件控制渲染与否
• 若需要保留子组件状态，或渲染逻辑属于子组件自身职责，再用方式二

官方还明确提到：返回null的组件仍然会触发componentDidMount（类组件）或useEffect（函数组件），使用方式二时要注意副作用的条件控制。

三、优化方式二的小技巧 #

如果想用方式二但不想在isRender为false时执行内部逻辑，可以把需要条件触发的逻辑包裹在判断里：

const MyComponent2 = ({ isRender }) => {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // 仅当isRender为true时才请求数据
    if (isRender) {
      fetch('/api/data').then(res => setData(res));
    }
  }, [isRender]);

  if (!isRender) return null;

  return (
    <div>This is my component 2: {data}</div>
  )
}

内容的提问来源于stack exchange，提问作者Epple