技術標籤：ReactReact Hooks

目錄

• 前言
• 一、background
• • • 1.1 設計初衷
    • 1.2 example
    • 1.3 useContext三大件
    • 1.4 全部程式碼
• 總結

前言

最近開始學習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的方法