如果你是一名 React 开发者，你可能会喜欢它的简洁和强大。但你很可能也曾与一个隐藏在众目睽睽之下的敌人作斗争：不必要的重新渲染。而最常见的罪魁祸首是什么？讽刺的是，它恰恰是我们每天用来简化生活的工具：Context API。
多年来，社区已经接受了一个令人不舒服的权衡：使用 Context 来避免“prop drilling”，但随后花费数小时手动优化React.memo、useMemo和useCallback来阻止随之而来的重新渲染浪潮。
如果我们告诉您这种权衡不再必要，您会怎么想？
问题：千次重渲染导致死亡 React 的 Context API 的内部工作原理就像一个无线电广播：当 Provider 中的值发生变化时，它会不加区分地将新状态传输给所有监听的组件。
想象一下，一个包含用户信息、应用主题和通知列表的全局状态。如果主题从“亮”变为“暗”，显示用户姓名的组件和显示通知的组件也会被迫重新计算所有内容，即使它们关心的数据丝毫没有改变。从大范围来看，这会导致缓慢但持续的性能下降。
解决方案：停止喊叫，开始订阅 受到信号的精确性和 Zustand 等库的简单性的启发，我们创建了react-signal-context。
它是一个嵌入式库，其 API 几乎与你熟悉和喜爱的库完全相同，但底层引擎却截然不同。它并非将每个更新广播给所有组件，而是允许每个组件“悄悄地”向 store 告知它真正需要的状态。
结果如何？当且仅当组件所选的特定数据发生变化时，组件才会重新渲染。不多不少。
眼见为实 我们来看看它有多么熟悉。
1.创建您的商店： // store.ts import { createSignalContext } from 'react-signal-context';
export const { Provider, useContext } = createSignalContext((set) => ({ count: 0, theme: 'light', increment: () => set((state) => ({ count: state.count + 1 })), toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light', })), })); 2. 选择性地使用状态： // Counter.tsx import { useContext } from './store'; import React from 'react';
// This component will ONLY re-render if 'count' or 'increment' changes. // It will completely ignore theme updates. const Counter = React.memo(() => { const count = useContext((state) => state.count); const increment = useContext((state) => state.increment);
console.log('Counter component is rendering!');
return Count: {count}; }); // ThemeDisplay.tsx import { useContext } from './store'; import React from 'react';
// This component will ONLY re-render if 'theme' changes. const ThemeDisplay = React.memo(() => { const theme = useContext((state) => state.theme);
console.log('Theme component is rendering!');
return
Current theme: {theme}
; }); 通过这种方法，性能成为默认设置，而不是手动优化。我们的承诺：Zustand 的性能与 Context API 的简单性 react-signal-context被设计成一个“成功之坑”。我们希望让做正确的事情变得容易。
✅零重构：从标准切换React.useContext只需要添加一个选择器。
✅轻量级：没有外部依赖，只有纯粹的 React。
✅现代且面向未来：它利用useSyncExternalStore钩子，即 React 官方推荐的与外部存储集成的方法，确保与并发功能完全兼容。
现在就尝试一下！ 我们非常高兴能与社区分享这个工具。我们相信它能够真正改善众多 React 开发者的生活。
📦通过 npm 安装：
npm install react-signal-context 🔗在 GitHub 上探索代码：[链接到你的 GitHub 存储库]
📖阅读文档：[链接到 GitHub 或文档站点上的 README.md]
在您的下一个项目中试用它，或将其引入现有项目以解决性能瓶颈。请在 GitHub 上创建问题或参与讨论，告诉我们您的想法。
现在是时候停止与重新渲染作斗争并开始以简单的方式构建更快的 React 应用程序了。作者www.mjsyxx.com
