GitHub
只添加一个 React Context 的问题
在 React Hooks 项目中，我们已经基本不需要传统的 Redux 之类的状态管理工具，直接使用 React 自身的 Context 功能即可。
而在项目中，若只添加一个 Context，如果 state 过多，那么 state 间将没有隔离。
也就是每次更新 Context，都会触发所有 state 使用者的重渲染 —— 更新 x，只使用 y 的组件也会重渲染。
所以实际开发中，我们需要添加多个 Context 对 state 进行隔离，只把相关的 state 放在一起。
添加多个 Context 的代码示例
const XContext = createContext({});
const YContext = createContext({});
const ZContext = createContext({});
const useX = () => useContext(XContext);
const useY = () => useContext(YContext);
const useZ = () => useContext(ZContext);
const XProvider = ({ children }) => {
const [x, setX] = useState(0);
const value = useMemo(() => ({ x, setX }), [x]);
return <XContext.Provider value={value}>{children}</XContext.Provider>;
};
const YProvider = ({ children }) => {
const [y, setY] = useState(0);
const value = useMemo(() => ({ y, setY }), [y]);
return <YContext.Provider value={value}>{children}</YContext.Provider>;
};
const ZProvider = ({ children }) => {
const [z, setZ] = useState(0);
const value = useMemo(() => ({ z, setZ }), [z]);
return <ZContext.Provider value={value}>{children}</ZContext.Provider>;
};
const App = () => {
return (
<XProvider>
<YProvider>
<ZProvider>
<AppMain />
</ZProvider>
</YProvider>
</XProvider>
);
};
在上面的例子中，我们添加了 XContext、YContext、ZContext 3 个 Context。
这样开发，有什么体验不太好的地方呢？
—— 我们书写了大量的重复代码。
添加每个 Context 都得经历 createContext()，复制粘贴 <XXXContext.Provider>，以及加在 App 的操作。总之，需要书写大量的样板代码。
如果还要添加更多 Context 呢？只能不断去复制一模一样的工作。
如何简单的添加多个 Context？
而使用 react-easy-contexts 的话，上面的例子就可以变成这样：
import { create, useProvider } from 'react-easy-contexts';
const ctx = create({
useX() {
const [x, setX] = useState(0);
return useMemo(() => ({ x, setX }), [x]);
},
useY() {
const [y, setY] = useState(0);
return useMemo(() => ({ y, setY }), [y]);
},
useZ() {
const [z, setZ] = useState(0);
return useMemo(() => ({ z, setZ }), [z]);
},
});
const App = () => {
const Provider = useProvider(ctx);
return (
<Provider>
<AppMain />
</Provider>
);
};
代码立刻清爽了很多。
是的，使用 create() 和 useProvider() 两个 API，再也不用每次创建 Context，都书写 createContext <XXXContext.Provider> 这样的样板代码。
以最简单、最直观的方式，维护多个 Context，一目了然。
create() 返回的 ctx，传入 useProvider(ctx)。使用 ctx.useX、ctx.useY、ctx.useZ hooks 来获取 Context 即可。
react-easy-contexts，最简单的 Context 添加工具
隆重介绍 react-easy-contexts，一个方便添加多个 Context 的小工具。
更多介绍可查看 GitHub。
GitHub 地址：
在线示例：
