React.js中如何避免组件冗余重渲染，直接调用目标组件？

嘿，我完全懂你遇到的困扰——每次点击那个切换组件的按钮，父组件都会先跑一遍render，然后才加载目标的True/False组件，要是父组件里还有其他复杂内容，这额外的渲染确实挺浪费性能的。咱们来聊聊怎么解决这个问题：

父组件之所以会重渲染，是因为控制组件切换的state存在于父组件中，每次点击按钮修改state，都会触发父组件的重新渲染。最直接的解决办法就是把这部分逻辑单独封装成一个子组件，让父组件完全不参与这个切换的state管理。

步骤1：封装独立的切换子组件 #

把控制显示哪个组件的state、点击事件，还有按钮和子组件的渲染逻辑都放到一个单独的组件里：

import { useState } from 'react';
import TrueComponent from './TrueComponent';
import FalseComponent from './FalseComponent';

const ToggleSwitch = () => {
  // 切换状态只在这个子组件里维护
  const [showTrue, setShowTrue] = useState(false);

  const handleToggle = () => {
    setShowTrue(prev => !prev);
  };

  return (
    <div>
      <button onClick={handleToggle}>切换组件</button>
      {/* 根据状态渲染对应组件 */}
      {showTrue ? <TrueComponent /> : <FalseComponent />}
    </div>
  );
};

export default ToggleSwitch;

然后在你的父组件里直接引入这个子组件就行：

import ToggleSwitch from './ToggleSwitch';

const ParentComponent = () => {
  console.log('父组件渲染'); // 现在点击切换按钮，这个日志不会再触发了！

  return (
    <div>
      {/* 父组件的其他内容 */}
      <h1>这是父组件的内容</h1>
      {/* 引入切换子组件 */}
      <ToggleSwitch />
    </div>
  );
};

export default ParentComponent;

这样一来，点击切换按钮时，只有ToggleSwitch组件会因为自己的state变化而重渲染，父组件完全不受影响，自然也就跳过了不必要的render步骤。

额外优化：给子组件加React.memo防冗余渲染 #

如果你的TrueComponent和FalseComponent本身也存在不必要的重渲染（比如父组件因为其他原因重渲染时，它们也跟着跑render），可以用React.memo包裹它们，确保只有当props变化时才重新渲染：

// TrueComponent.jsx
import React from 'react';

const TrueComponent = () => {
  console.log('True组件渲染');
  return <div>我是True组件</div>;
};

// 用React.memo包裹，浅比较props，无变化则不渲染
export default React.memo(TrueComponent);

同样的方式处理FalseComponent，进一步减少不必要的渲染开销。

为什么不直接用React.memo优化父组件？ #

很多人第一反应是用React.memo包裹父组件，但这里要注意：父组件的state变化一定会触发重渲染，React.memo只能阻止因props变化导致的重渲染。所以只要切换的state在父组件里，父组件的render就躲不掉，拆分组件才是根本解决办法。

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