如何避免useContext更新映射列表中的所有Component实例

要实现仅当组件id匹配currentId且MyContext的value变化时才重新渲染，你可以通过拆分组件或结合React.memo与useMemo来解决，同时避免违反React Hooks的使用规则（不能条件调用useContext）。

方案一：拆分组件（推荐，逻辑更清晰） #

将组件拆分为外层判断组件和内层订阅Context的组件，只有匹配currentId的组件才会渲染内层订阅MyContext的部分：

import React, { useContext } from 'react';

const ComponentList = () => {
  return(
    <>
      {/* 注意：key用唯一的d.id而不是index，避免组件复用错误 */}
      {data.map((d) => 
        <Component key={d.id} id={d.id} />
      )}
    </>
  )
}

const Component = ({ id }) => {
  const { currentId } = useContext(OtherContext);

  // 仅当id匹配currentId时，才渲染订阅MyContext的子组件
  if (id !== currentId) {
    return null; // 或渲染占位元素，比如<div></div>
  }

  return <ActiveComponent />;
};

// 用React.memo包裹，确保只有MyContext变化时才重新渲染
const ActiveComponent = React.memo(() => {
  const { value } = useContext(MyContext);
  return <h1>{value}</h1>;
});

原理： #

• 外层Component仅订阅OtherContext，当currentId变化时，所有Component会重新渲染，但只有匹配的组件会渲染ActiveComponent。
• ActiveComponent仅订阅MyContext，且被React.memo包裹，只有当MyContext.value变化时才会重新渲染。

方案二：结合React.memo与useMemo #

在单个组件内通过useMemo控制渲染内容，同时用React.memo阻止不必要的重渲染：

import React, { useContext, useMemo, memo } from 'react';

const ComponentList = () => {
  return(
    <>
      {data.map((d) => 
        <MemoizedComponent key={d.id} id={d.id} />
      )}
    </>
  )
}

// 用React.memo包裹组件，仅当props变化时才触发重渲染
const MemoizedComponent = memo(({ id }) => {
  const { value } = useContext(MyContext);
  const { currentId } = useContext(OtherContext);

  // 仅当id匹配currentId且value变化时，才重新生成渲染内容
  const content = useMemo(() => {
    if (id !== currentId) {
      return null;
    }
    return <h1>{value}</h1>;
  }, [id, currentId, value]);

  return content;
});

原理： #

• React.memo确保组件不会因为父组件重新渲染（如ComponentList重渲染）而无意义更新，仅当id变化时才会触发组件内部更新。
• useMemo缓存渲染内容，只有当id、currentId、value这三个依赖项变化时，才重新计算并返回新的JSX。

注意事项 #

• 永远不要用数组index作为组件的key，要用每个item的唯一id（如d.id），避免数据顺序变化时组件错误复用。
• 不要条件调用useContext，这违反React Hooks规则，会导致不可预测的bug。

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