react-easy-contexts，以最简单的方式，添加多个 React Context

只添加一个 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 = ctx.useProvider();
  return (