React context 實現組件聯動功能

我們知道React Context 已經出現有一段時間了並且隨着hook的盛行，我們更多的發掘出了Context的價值。

Context是可以像Redux一樣用來管理狀態，不知道你有沒有像我一樣有這個疑問，那既然Redux就可以管理狀態，爲什麼要使用Context呢？

現在我的理解呢是由於Context API不像Redux那樣依賴很多第三方庫。但是並不是說Context就可以代替Redux的。

那你可能又好奇了:什麼時候用Context?什麼時候使用Reudx呢？

一般情況下，如果狀態不需要經常update的我們可以使用Context,比如像語言切換，主題切換，權限驗證等，如果狀態高頻率Updata，那麼Context不是一個很好的解決方案，因爲每次的Updata,都要重新渲染，這個時候我們可以使用Redux。

下面就用一段簡單的代碼實現組件之間的聯動

廢話不多說，附上代碼是王道。

import React, { createContext, useState, useContext } from 'react'

const Elements = createContext()

const Child1 = () => {
  const [count, setCount] = useContext(Elements)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(prevState => prevState + 1)}>
        Button1
      </button>
    </div>
  )
}

const Child2 = () => {
  const [count, setCount] = useContext(Elements)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(prevState => prevState + 2)}>
        Button2
      </button>
    </div>
  )
}

const App = () => {
  const initialState = useState(0)

  return (
    <Elements.Provider value={initialState}>
      <Child1 />
      <Child2 />
    </Elements.Provider>
  )
}

export default App