React中Context的使用方法

前言

最近开始学习React，跟着Kent学，有很多干货，这里分享React Hook中的useContext

---

一、background

1.1 设计初衷

useContext设计的初衷是给全局共享state的，这样就不需要每个state都通过prop传递了；这里举一个简单的例子学习一下useContext的用法

1.2 example

设计一个counter，组件如下；其中，CountDisplay负责展示counter的数值，Counter是一个button，每点击一下CountDisplay的数值会累加1

 <div>
   <CountDisplay />
   <Counter />
 </div>

注意: 这里只是为了展示context而使用的context，现实场景中并不需要用context解决

1.3 useContext三大件

1. React.createContext(): context 的初始化
2. provider: 提供context的父组件，用来包裹需要context的子组件的
3. React.useContext(): 子组件获得context的方法

那么对于上面counter的例子，context如下

const CounterContext = React.createContext()

const CountProvider = ({children}) => {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  )
}

然后，使用CountProvider把子组件包裹起来

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

这样，子组件就可以使用context了，这里使用

React.useContext(CounterContext)

就可以了，但是有时候user可能忘记使用CountProvider，这样会导致error，不妨使用useCountContext来做错误处理，这样在组件的时候就不需要错误处理了

function useCountContext() {
  const context = React.useContext(CounterContext)
  if (!context) {
    throw new Error('useCountContext must used within CountProvider')
  }
  return context
}

组件的调用如下

function CountDisplay() {
  const [count] = useCountContext()
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [,setCount] = useCountContext()
  const increment = () => {
    setCount(c=>c+1)
  }
  return <button onClick={increment}>Increment count</button>
}

1.4 全部代码

这里就是展示使用context的全部代码

import * as React from 'react'

const CounterContext = React.createContext()

const CountProvider = ({children}) => {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  )
}

function useCountContext() {
  const context = React.useContext(CounterContext)
  if (!context) {
    throw new Error('useCountContext must used within CountProvider')
  }
  return context
}

function CountDisplay() {
  const [count] = useCountContext()
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [,setCount] = useCountContext()
  const increment = () => {
    setCount(c=>c+1)
  }
  return <button onClick={increment}>Increment count</button>
}

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

export default App

---

总结

useContext使用是为了共享全局state的，其实现实使用很少，比如在调用主题色，语言这种全局的state才会使用到；可以看出来，上面的例子是为了使用context而过度设计的；总的来说，如果真的使用的话，记得三个步骤就ok了

1. React.createContext(): context 的初始化
2. provider: 提供context的父组件，用来包裹需要context的子组件的
3. React.useContext(): 子组件获得context的方法