两行代码教你用React useContext代替React-redux
<p>话不多说，先上代码：</p><div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 第一行</span>
export const TextContext = React.createContext();</pre>
</div>
<div class="cnblogs_code">
<pre>const Wrapper = () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 第二行</span>
<TextContext.Provider value={React.useState(‘Hello World.’)}>
<ComponentA />
<ComponentB />
</TextContext.Provider>
<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<p>解释一下：</p>
<p>第一段是定义一个 TextContext，也就是我们需要共享的状态context。</p>
<p>第二段是把需要用到这个context的组件包裹起来。</p>
<p>关键点就在于把TextContext的初始化value设置为 一个useState。（自己琢磨里面的含义吧）</p>
<p>我们一共就加了2行额外的代码，它带来的效果是被TextContext所包裹的所有所有组件，包含所有嵌套组件，都可以拿到和<span style="font-size: 16px"><strong>修改</strong></span>这个状态，当状态改变时，所有用到的组件都会重新渲染。</p>
<p>子组件怎么用呢？看代码：</p>
<div class="cnblogs_code">
<pre>const ComponentA = () =><span style="color: rgba(0, 0, 0, 1)"> {
const </span>=<span style="color: rgba(0, 0, 0, 1)"> React.useContext(TextContext);
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <button onClick={() => setText('Hello Component A')}></button>
}</pre>
</div>
<p>这和redux带来的效果是一样的，即维护了一个可以多个组件共用的状态。</p>
<p>和redux不同的是，它更灵活，想放在那里放在那里。</p>
<p>useContext也可以模拟Redux的方式，把上面的useState换成useReducer就可以了。然后像redux一样一个页面只维护一个状态，同时维护多个reducer。这里不再多介绍。</p>
<p>其实呢，把useState换成useRef也可以的，然后把结果赋给一个dom元素，这样就可以在一个组件中拿到另一个组件的dom元素，是不是很神奇？</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/yy17yy/p/12551791.html
頁:
[1]