React：实现Component多实例值一致且不触发Home组件重渲染

每个Component实例都独立维护自己的count状态，各自启动定时器生成随机数，所以两个实例的数值自然不一致。要实现共享状态且不触发父组件及其他无关组件重渲染，需要把状态抽离为共享单例，让组件订阅状态变化而非各自维护状态。

1. 创建共享状态容器：用闭包维护全局唯一的count值和订阅者列表，确保所有组件共享同一状态。
2. 自定义Hook封装订阅逻辑：让组件通过Hook订阅共享状态的变化，实现局部更新。
3. 优化组件渲染：用React.memo包裹无关组件，避免不必要的重渲染。

修改后的完整代码 #

import { useState, useEffect, memo } from "react";

// 共享状态容器：闭包维护单例状态与订阅机制
let sharedCount = 0;
const subscribers = new Set();

const updateSharedCount = (newCount) => {
  sharedCount = newCount;
  // 通知所有订阅组件更新状态
  subscribers.forEach(callback => callback(sharedCount));
};

// 自定义Hook，供组件订阅共享状态
function useSharedCount() {
  const [count, setCount] = useState(sharedCount);

  useEffect(() => {
    const callback = (newCount) => setCount(newCount);
    subscribers.add(callback);
    // 组件卸载时取消订阅
    return () => subscribers.delete(callback);
  }, []);

  // 全局仅启动一次定时器，更新共享状态
  useEffect(() => {
    const interval = setInterval(() => {
      const newCount = Math.floor(Math.random() * 1000);
      updateSharedCount(newCount);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return { count };
}

// 用memo包裹，避免不必要重渲染（可选，但更严谨）
const Component = memo(() => {
  const { count } = useSharedCount();
  
  useEffect(() => {
    console.log("Component rerender");
  });

  return count;
});

// 用memo确保无关组件不会触发重渲染
const OtherStuff = memo(() => {
  console.log("OtherStuff");
  return <h1>Should Not Rerender OtherStuff</h1>;
});

const MoreStuff = memo(() => {
  console.log("MoreStuff");
  return <h1>Should Not Rerender MoreStuff</h1>;
});

export default function Home() {
  return (
    <>
      <h1>Hello</h1>
      <h1>
        <Component />
      </h1>
      <OtherStuff />
      <MoreStuff />
      <h1>
        <Component />
      </h1>
    </>
  );
}

效果说明 #

• 两个Component实例会显示完全相同的随机数，因为共享同一状态。
• 定时器仅启动一次，避免资源浪费。
• Home、OtherStuff、MoreStuff不会因count更新触发重渲染，只有Component自身会更新。

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