React中兄弟组件高效共享Props及避免不必要重渲染的方案

一、如何高效在Component_A与Component_B间维护状态？ #

核心思路是缩小状态的作用域，只让依赖该状态的组件及其直接父组件参与重渲染，避免整个App组件树被波及，具体可采用以下方案：

1. 将状态下移至共同父组件 #

把原App组件中的state和setState，迁移到专门包裹Component_A和Component_B的容器组件中，比如创建MainSection组件：

// MainSection.jsx
export default function MainSection() {
  const [state, setState] = useState("");
  
  return (
    <main>
      <Component_A state={state} setState={setState} />
      <Component_B />
    </main>
  );
}

// App.jsx
export default function App() {
  return (
    <>
      <MainSection />
      <Component_C />
      <Component_D state={state} /> {/* 若Component_D也需该状态，可结合下方Context方案 */}
    </>
  );
}

此时state变更时，仅MainSection、Component_A和Component_B会重渲染，Component_C和App组件本身不受影响。

2. 用React Context拆分状态作用域 #

如果Component_A、Component_B、Component_D都需要共享该状态，又不想让整个App重渲染，可以创建专属Context封装状态：

// StateContext.jsx
import { createContext, useContext, useState } from 'react';

const StateContext = createContext();

export function StateProvider({ children }) {
  const [state, setState] = useState("");
  
  return (
    <StateContext.Provider value={{ state, setState }}>
      {children}
    </StateContext.Provider>
  );
}

export function useStateContext() {
  return useContext(StateContext);
}

// App.jsx
export default function App() {
  return (
    <>
      <StateProvider>
        <main>
          <Component_A />
          <Component_B />
        </main>
        <Component_D />
      </StateProvider>
      <Component_C /> {/* Component_C不在Provider范围内，完全不受state变更影响 */}
    </>
  );
}

// Component_A.jsx
import { useStateContext } from './StateContext';

export default function Component_A() {
  const { state, setState } = useStateContext();
  // 组件逻辑
}

// Component_D.jsx
import { useStateContext } from './StateContext';

export default function Component_D() {
  const { state } = useStateContext();
  // 组件逻辑
}

只有被StateProvider包裹且消费了Context的组件，才会在状态变更时重渲染，其余组件不受干扰。若想进一步优化Context的重渲染，可以拆分状态或配合useReducer缓存Provider的value。

二、如何避免props未变更的组件触发重渲染？ #

针对props无变化但组件仍重渲染的场景，可通过以下React内置API解决：

1. 用React.memo包裹纯组件 #

如果组件是纯函数组件（props不变时输出完全一致），用React.memo包裹后，React会浅比较props是否变化，仅当props真的改变时才触发重渲染：

import { memo } from 'react';

const Component_B = memo(() => {
  // 组件逻辑
  return <div>Component B</div>;
});

export default Component_B;

注意：若props包含引用类型（对象、数组、函数），浅比较会认为每次都是新引用，此时需配合useCallback或useMemo处理。

2. 用useCallback缓存函数props #

父组件传递给子组件的函数（如自定义回调），会在父组件重渲染时生成新引用，导致子组件误触发重渲染。用useCallback缓存函数，确保引用稳定：

// 示例：在MainSection中传递自定义回调给Component_A
const handleStateUpdate = useCallback((newValue) => {
  setState(newValue);
}, [setState]); // useState返回的setState本身是稳定的，依赖数组仅需包含它

return <Component_A state={state} handleUpdate={handleStateUpdate} />;

3. 用useMemo缓存引用类型props #

如果传递的是对象、数组这类引用类型的props，用useMemo缓存，保证引用不变：

const memoizedProps = useMemo(() => ({
  currentValue: state,
  extraData: '固定内容'
}), [state]);

return <Component_A data={memoizedProps} />;

4. 拆分组件，分离重渲染区域 #

若一个组件中只有部分内容依赖变化的状态，可将这部分拆为独立子组件，让父组件的其余部分避免不必要的重渲染。

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