useContext更佳实践

素颜马尾好姑娘i 2022-11-30 15:44 186阅读 0赞

> 有人说：构建`React`应用就像用积木搭房子，每个`组件`就是一块积木。

这么说的人可能忽视了`state`（状态）—— 不同于`组件`是以树的形式组合，我们经常会在不同层级的组件间公用同一个`state`。

面对这种情况，有些同学选择引入`状态管理库`（比如`Redux`）。

事实上，`React`内置的`context`API可以解决大部分状态传递问题。

本文接下来要讲的，就是如何更有效的使用`context`。

# 错误前置 #

在我们的Demo中，有个`context`——`CountContext`。

当其`render`时如果上层结构中不存在`context provider`为他提供`context value`，则在解构`context value`时会报错。

const CountContext = React.createContext();
    
    function CountDisplay() {
     // 解构语法报错
      const {count} = React.useContext(CountContext);
      return <div>{count}</div>;
    }

这是因为`CountContext`没有`默认值`，所以为`undefined`。将`undefined`当作对象解构时报错。

在有些场景下`默认值`是有意义的。但是大多数情况，`context consumer`需要`context provider`为他提供有用的`context value`。

这意味着使用`context`的业务组件需要判断`undefined`，否则可能出现运行时错误。

为了解决这个问题，我们可以用自定义`hook`将`错误前置`。

// src/count-context.js
    const CountContext = React.createContext();
    
    function useCount() {
      const context = React.useContext(CountContext);
      
      if (context === undefined) {
        throw new Error('必须在CountProvider内使用useCount');
      }
      
      return context;
    }

同时提供`CountProvider`：

// src/count-context.js
    
    function CountProvider({children}) {
      const stateHook = React.useState();
      return (
        <CountContext.Provider value={stateHook}>
          {children}
        </CountStateContext.Provider>
      )
    }

在需要`CountContext`的业务组件中，我们不再需要直接使用`CountContext`，而是引入`useCount`与`CountProvider`：

// src/app.jsx
    
    import {useCount, CountProvider} from './count-context.js'
    
    function CountDisplay() {
      const [count] = useCount();
      return <div>{count}</div>;
    }
    
    function App() {
      return (
        <CountProvider>
          <CountDisplay />
        </CountProvider>
      )
    }

如果在未包裹`CountProvider`的情况下单独使用`useCount`，会直接抛出错误，而不需要等到使用`context`时再报错。

这种将错误前置的方式能够帮我们更好的规避`运行时错误`。

# state与dispatch分离 #

在`CountProvider`中，`stateHook`作为`context value`传递给`context consuer`。

function CountProvider({children}) {
      const stateHook = React.useState();
      // ...
    }

其中`state`与改变`state`的方法（dispatch）同时存在于`context value`中。

有些时候，展示`state`的组件与触发`state`变化的组件不是同一个组件，比如：

function App() {
      return (
        <CountProvider>
          <CountDisplay />
          <Counter />
        </CountProvider>
      )
    }

其中`CountDisplay`用于展示`state`。

`Counter`用于触发`state`变化。

由于`state`与`dispatch`同时存在于`context value`，`state`变化后`CountDisplay`与`Counter`都会重新`render`。

这对于只负责触发组件`state`变化的`Counter`来说是不必要的。

为此，我们可以将`state`与`dispatch`分离。

修改`CountProvider`：

// src/count-context.js
    
    const CountStateContext = React.createContext();
    const CountDispatchContext = React.createContext();
    
    function CountProvider({children}) {
      const [state, dispatch] = React.useState();
      return (
        <CountStateContext.Provider value={state}>
          <CountDispatchContext.Provider value={dispatch}>
            {children}
          </CountDispatchContext.Provider>  
        </CountStateContext.Provider>
      )
    }

同时，`useCount`也拆分为`useCountState`与`useCountDispatch`：

// src/count-context.js
    
    function useCountState() {
      const context = React.useContext(CountStateContext);
      
      if (context === undefined) {
        throw new Error('必须在CountProvider内使用useCountState');
      }
      
      return context;
    }
    
    function useCountDispatch() {
      const context = React.useContext(CountDispatchContext);
      
      if (context === undefined) {
        throw new Error('必须在CountProvider内使用useCountDispatch');
      }
      
      return context;
    }

在`CountDisplay`中使用`useCountState`。

在`Counter`中使用`useCountDispatch`。

这样，即使`state`变化，只有`CountDisplay`会`render`，`Counter`不会`render`。

# 更灵活的拓展 #

事实上，将`context`分离为动态（state），静态（dispatch）两部分后可以拥有更灵活的拓展。

当需要更多`state`时，可以将`CountProvider`的`useState`替换为`useReducer`：

// src/count-context.js
    
    function CountProvider({children}) {
      const [state, dispatch] = React.useReducer(countReducer);
      return (
        <CountStateContext.Provider value={state}>
          <CountDispatchContext.Provider value={dispatch}>
            {children}
          </CountDispatchContext.Provider>  
        </CountStateContext.Provider>
      )
    }

当需要更多`方法`时，你也可以拓展`CountDispatchContext`。

# 总结 #

通过这套`context`的“更”佳实践，审视下我们现有的业务，是不是很多时候并不需要额外的`状态管理库`呢？

![format_png][]

[format_png]: /images/20221123/9f1884af0cb0430e934dfac079e24b5d.png