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
useReducer代替Redux小案例-1(七)的更多相关文章
- useReducer代替Redux小案例-2(八)
通过上节课的学习,用useContext实现了Redux状态共享的能力,这节课看一下如何使用useReducer来实现业务逻辑的控制.需要注意的是这节课的内容是接着上节课的,需要你把上节课的代码部分完 ...
- node.js(小案例)_实现学生信息增删改
一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
- react框架实现点击事件计数小案例
下面将以一个小案例来讲解react的框架的一般应用,重点内容在代码段都有详细的解释,希望对大家有帮助 代码块: 代码块: import React from 'react'; import React ...
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- shell讲解-小案例
shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 02SpringMvc_springmvc快速入门小案例(XML版本)
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
随机推荐
- [新手必备]Python 基础入门必学知识点笔记
Python 作为近几年越来越流行的语言,吸引了大量的学员开始学习,为了方便新手小白在学习过程中,更加快捷方便的查漏补缺.根据网上各种乱七八糟的资料以及实验楼的 Python 基础内容整理了一份极度适 ...
- 迷你商城后台管理系统————stage3项目部署测试汇总
系统测试 在项目部署到云服务器之前,已通过本机启动springboot程序,访问localhost:8080,输入登陆的账户等一系列操作测试:功能测试.健壮性测试,系统已满足用户规定的需求. 系统部署 ...
- 数据库类型对应Java语言类型表
下表列出了基本 SQL Server.JDBC 和 Java 编程语言数据类型之间的默认映射: SQL Server 类型 JDBC 类型 (java.sql.Types) Java 语言类型 big ...
- h5中history实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mysql 用户创建,授权
关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost id ...
- bcb中TParamter传NULL值
if (status_Desc.IsEmpty()) Queue_Status->Value = Null(); else Queue_Status->Value = status_Des ...
- SpringBoot -基础学习笔记 - 01
SpringBoot个人笔记-szs 一.使用thymeleaf模板引擎来指定所需资源的位置 可以做到当项目名进行更改后,模板引擎也会进行更新相关的路径;如下图展示,会自动添加crud根目录! < ...
- MongoDB与Python的交互
驱动模块 pymongo是python里常用的操作MongoDB的驱动模块 可用pip下载安装 pip install pymongo 创建连接 MongoClient是MongoDB的客户端代理对象 ...
- git常用命令总结--原创
0.git status 仓库状态1.git add 工作区-->暂存区2.git commit 暂存区-->版本库3.git log 查看日志4.git reset --hard hea ...
- 4:ELK分析tomcat日志
五.ELK分析tomcat日志 1.配置FIlebeat搜集tomcat日志 2.配置Logstash从filebeat输入tomcat日志 3.查看索引 4.创建索引