两行代码教你用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元素，是不是很神奇？