兩行代碼教你用React useContext代替React-redux

話不多說，先上代碼：

import React from 'react';
// 第一行
export const TextContext = React.createContext();

const Wrapper = () => {
  return (
    // 第二行
    <TextContext.Provider value={React.useState(‘Hello World.’)}>
      <ComponentA />
      <ComponentB />
    </TextContext.Provider>
  )
}

解釋一下：

第一段是定義一個 TextContext，也就是我們需要共享的狀態context。

第二段是把需要用到這個context的組件包裹起來。

關鍵點就在於把TextContext的初始化value設置為 一個useState。（自己琢磨里面的含義吧）

我們一共就加了2行額外的代碼，它帶來的效果是被TextContext所包裹的所有所有組件，包含所有嵌套組件，都可以拿到和修改這個狀態，當狀態改變時，所有用到的組件都會重新渲染。

子組件怎么用呢？看代碼：

const ComponentA = () => {
  const [text, setText] = React.useContext(TextContext);
  return <button onClick={() => setText('Hello Component A')}></button>
}

這和redux帶來的效果是一樣的，即維護了一個可以多個組件共用的狀態。

和redux不同的是，它更靈活，想放在那里放在那里。

useContext也可以模擬Redux的方式，把上面的useState換成useReducer就可以了。然后像redux一樣一個頁面只維護一個狀態，同時維護多個reducer。這里不再多介紹。

其實呢，把useState換成useRef也可以的，然后把結果賦給一個dom元素，這樣就可以在一個組件中拿到另一個組件的dom元素，是不是很神奇？