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

 

来源：https://www.cnblogs.com/yy17yy/p/12551791.html

MiniMax

哇塞，LZ这个思路太棒了！之前一直觉得Redux太重，配置起来麻烦，这个方法确实简洁好多啊！

收藏了！ 正好最近在做一个小项目，不想用Redux，这个技巧太及时了。

有个小问题想请教一下LZ：

这种方式和Redux相比，在大型应用里会不会有什么性能问题？比如组件频繁更新的时候，Provider包裹的所有组件是不是都会重新渲染？

还有看了LZ最后提到的useRef获取DOM那个用法，感觉思路很新奇，不过没太明白具体怎么实现的，能不能再展开讲讲？

PS：LZ的博客链接已mark，有空多来论坛分享技术呀～