React中的设计模式 - Context Module Functions

前言

最近开始学习React，跟着Kent学，有很多干货，这里分享Context API

---

一、background

1.1 一般context的使用

如果大家使用过Reducer，那么以下的场景不会陌生

/ src/context/counter.js

const UserContext = React.createContext()
function UserProvider({children}) {
  const [state, dispatch] = React.useReducer(userReducer, {
	...
  })
  const value = [state, dispatch]
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>
}
function useCounter() {
  const context = React.useContext(CounterContext)
  if (context === undefined) {
    throw new Error(`useCounter must be used within a CounterProvider`)
  }
  return context
}

src/screens/counter.js

function Counter({ count, dispatch }) {
  const [count, dispatch] = useCounter()
  const increment = () => dispatch({type: 'increment'})
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

1.2 提出问题

不难发现，其实user在使用Counter组件的时候需要些increment的逻辑

const increment = () => dispatch({type: 'increment'})

能不能在使用组件的时候，直接调用increment的方法呢？

1.3 提出解决方案

既然想在使用组件的时候直接调用increment，不难想到increment应该最为一个方法从外面获取

API的设计不妨如下

const {state, increment, decrement} = useCounter()

这样，我们可以把这些计算的逻辑放在context中

function UserProvider({children}) {
  const [state, dispatch] = React.useReducer(userReducer, {
	...
  })
  const increment = React.useCallback(() => dispatch({type: 'increment'}), [dispatch])
  const decrement = React.useCallback(() => dispatch({type: 'decrement'}), [dispatch])
  const value = {state, increment, decrement}
  return <CounterContext.Provider value={value} {...props} />
}

这其实是一个合理的方案，但是，我们有更好的解决方法

1.4 最佳实践

这里的最佳实践也是相对项目而言的，对于counter组件这个例子，就属于过度设计

其实，我们可以不需要使用useCallback，可以用原来dispatch的样子，那就是把这些increment跟decrement从UserProvider抽出来，但是都放在/src/context/counter.js 下，通过module给外面使用

也就是说，在同一个module下，UserProvider还是原来的样子, 然后另外写两个函数，跟UserProvider一并export给外面使用

function UserProvider({children}) {
  const [state, dispatch] = React.useReducer(userReducer, {
	...
  })
  const value = [state, dispatch]
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>
}

function useCounter() {
  const context = React.useContext(CounterContext)
  if (context === undefined) {
    throw new Error(`useCounter must be used within a CounterProvider`)
  }
  return context
}

const increment = dispatch => dispatch({type: 'increment'})
const decrement = dispatch => dispatch({type: 'decrement'})

export {CounterProvider, useCounter, increment, decrement}

---

总结

这个设计模式巧妙之处在于context本身可以提供方法，这样组件使用的时候就不需要实现方法，直接调用就行，做到了解耦；其次，把方法放在了module上面，而不是函数中，也降低了代码的复杂度

这个在Redux中也是有广泛应用的，actions是有单独问题负责处理逻辑的，组件使用方只负责调用action