在 react 中，推荐通过父组件控制子组件的渲染（如 `condition && `），而非在子组件内部返回 `null`；前者避免无谓的钩子执行和逻辑开销，支持懒加载与更优性能。

在 React 开发中，条件渲染是高频需求，但实现方式直接影响性能、可维护性与代码语义清晰度。最推荐的方式是在父组件中控制是否渲染子组件，即采用 condition && 的模式：

// ✅ 推荐：父组件决定是否挂载，子组件完全不执行
const Parent = () => {
  const [isReady, setIsReady] = useState(false);

  return (
    <div>
      {isReady && <mycomponent></mycomponent>} {/* MyComponent 不会初始化，无 hooks 执行 */}
      <button onclick="{()"> setIsReady(true)}>Show</button>
    </div>
  );
};

const MyComponent = () => {
  // ✅ 这些逻辑仅在 isReady === true 时才会执行
  useEffect(() => {
    console.log('Mounted!');
  }, []);

  const expensiveCalculation = useMemo(() => {
    return heavyComputation();
  }, []);

  return <div>Content</div>;
};

相比之下，将条件判断移入子组件内部（如 if (!props.isRender) return null）虽能“隐藏”内容，但存在明显缺陷：

• ❌ 钩子仍会被调用：React 要求所有 hooks 必须在组件函数顶部无条件执行。即使返回 null，useEffect、useState、useMemo 等仍会运行，造成冗余计算与潜在副作用；
• ❌ 状态与副作用提前创建：组件实例已进入 React 渲染流程，内部状态、上下文订阅、事件监听器等可能已初始化，违背“按需加载”原则；
• ❌ 阻碍代码分割与懒加载：无法与 React.lazy() 和 Suspense 配合实现真正的动态导入——因为组件始终被引用，打包器无法将其拆分为独立 chunk。

而父级条件渲染天然支持性能优化：

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

const LazyComponent = React.lazy(() => import('./LazyComponent'));

// ✅ 可与 Suspense 结合，首次满足条件时才下载并初始化
{show && (
  <suspense fallback="{<Spinner"></suspense>}>
    <lazycomponent></lazycomponent>
)}

⚠️ 注意事项：

• 避免在条件渲染中使用 && 与 falsy 值（如 0、''）混用，可能导致意外隐藏（例如 count && 在 count === 0 时不渲染）。此时应改用三元运算符或显式布尔转换：{count > 0 && }。
• 若条件逻辑复杂或复用频繁，可封装为自定义 Hook 或高阶组件，但核心原则不变：让组件只在真正需要时被挂载。

总结：条件渲染的本质不是“隐藏”，而是“按需创建”。优先选择父组件级控制，既符合 React 的声明式心智模型，又能保障性能、可预测性与可测试性。