useReducer代替Redux小案例-1（七）

使用useContext和useReducer是能够实现相似Redux的效果，而且一些简单的我的项目，彻底能够用下面的方案代替Redux，这种作法要比Redux简单一些。由于useContext和useReducer在前两节课已经学习过了，因此咱们这节课把精力就放在如何模拟出Redux的效果。若是你目前还不能掌握基本的语法，能够再复习一下前两节的知识点。

理论上的可行性

咱们先从理论层面看看替代Redux的可能性，其实若是你对两个函数有所了解，只要咱们巧妙的结合，这种替代方案是彻底可行的。

useContext：可访问全局状态，避免一层层的传递状态。这符合Redux其中的一项规则，就是状态全局化，并能统一管理。

useReducer：经过action的传递，更新复杂逻辑的状态，主要是能够实现相似Redux中的Reducer部分，实现业务逻辑的可行性。

通过咱们在理论上的分析是彻底可行的，接下来咱们就用一个简单实例来看一下具体的实现方法。那这节课先实现useContext部分（也就是状态共享），下节再继续讲解useReducer部分（控制业务逻辑）。

编写基本UI组件

既然是一个实例，就须要有些界面的东西，小伙伴们不要觉的烦。在/src目录下新建一个文件夹Example6，有了文件夹后，在文件夹下面创建一个showArea.js文件。代码以下：

import React from 'react';
function ShowArea(){
   
    return (<div style={{color:'blue'}}>字体颜色为blue</div>)

}
export default ShowArea

显示区域写完后，新建一个Buttons.js文件，用来编写按钮，这个是两个按钮，一个红色一个黄色。先不写其余任何业务逻辑。

import React from 'react';

function Buttons(){
    return (
        <div>
            <button>红色</button>
            <button>黄色</button>
        </div>
    )
}

export default Buttons

而后再编写一个组合他们的Example6.js组件，引入两个新编写的组件ShowArea和Buttons，并用<div>标签给包裹起来。

import React, { useReducer } from 'react';
import ShowArea from './ShowArea';
import Buttons from './Buttons';


function Example6(){
    return (
        <div>
                <ShowArea />
                <Buttons />
        </div>
    )
}

export default Example6

这步作完，须要到/src目录下的index.js中引入一下Example6.js文件，引入后React才能正确渲染出刚写的UI组件。

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example6/Example6'

ReactDOM.render(<Example />, document.getElementById('root'));

作完这步能够简单的预览一下UI效果，虽然很丑，可是只要能知足学习需求就能够了。咱们虽然都是前端，可是在学习时不必追求漂亮的页面，关键时把知识点弄明白。咱们写这么多文件，也就是要为接下来的知识点服务，其实这些组件都是衬托罢了。

编写颜色共享组件color.js

有了UI组件后，就能够写一些业务逻辑了，这节课咱们先实现状态共享，这个就是利用useContext。创建一个color.js文件，而后写入下面的代码。

import React, { createContext } from 'react';

export const ColorContext = createContext({})

export const Color = props=>{
    return (
        <ColorContext.Provider value={{color:"blue"}}>
            {props.children}
        </ColorContext.Provider>
    )
}

代码中引入了createContext用来建立共享上下文ColorContext组件，而后咱们要用{props.children}来显示对应的子组件。详细解释我在视频中讲解吧。

有了这个组件后，咱们就能够把Example6.js进行改写，让她能够共享状态。

import React, { useReducer } from 'react';
import ShowArea from './ShowArea';
import Buttons from './Buttons';
import { Color } from './color';   //引入Color组件

function Example6(){
    return (
        <div>
            <Color>
                <ShowArea />
                <Buttons />
            </Color>
            
        </div>
    )
}

export default Example6

而后再改写showArea.js文件，咱们会引入useContext和在color.js中声明的ColorContext，让组件能够接收全局变量。

import React , { useContext } from 'react';
import { ColorContext } from './color';

function ShowArea(){
    const {color} = useContext(ColorContext)
    return (<div style={{color:color}}>字体颜色为{color}</div>)

}

export default ShowArea

这时候就经过useContext实现了状态的共享，能够到浏览器中看一下效果。而后咱们下节课再实现复杂逻辑状态的变化。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html