useContext 让父子组件传值更简单(五)
有了useState
和useEffect
已经可以实现大部分的业务逻辑了,但是React Hooks
中还是有很多好用的Hooks
函数的,比如useContext
和useReducer
。
在用类声明组件时,父子组件的传值是通过组件属性和props
进行的,那现在使用方法(Function)来声明组件,已经没有了constructor
构造函数也就没有了props的接收,那父子组件的传值就成了一个问题。React Hooks
为我们准备了useContext
。这节课就学习一下useContext
,它可以帮助我们跨越组件层级直接传递变量,实现共享。需要注意的是useContext
和redux
的作用是不同的,一个解决的是组件之间值传递的问题,一个是应用中统一管理状态的问题,但通过和useReducer
的配合使用,可以实现类似Redux
的作用。
这就好比玩游戏时有很多英雄,英雄的最总目的都是赢得比赛,但是作用不同,有负责输出的,有负责抗伤害的,有负责治疗的。
Context
的作用就是对它所包含的组件树提供全局共享数据的一种技术。
createContext 函数创建context
直接在src
目录下新建一个文件Example4.js
,然后拷贝Example.js
里的代码,并进行修改,删除路由部分和副作用的代码,只留计数器的核心代码就可以了。
import React, { useState , useEffect } from 'react'; function Example4(){
const [ count , setCount ] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
</div>
)
}
export default Example4;
然后修改一下index.js
让它渲染这个Example4.js
组件,修改的代码如下。
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example4'
ReactDOM.render(<Example />, document.getElementById('root'));
之后在Example4.js
中引入createContext
函数,并使用得到一个组件,然后在return
方法中进行使用。先看代码,然后我再解释。
import React, { useState , createContext } from 'react';
//===关键代码
const CountContext = createContext() function Example4(){
const [ count , setCount ] = useState(0); return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
{/*======关键代码 */}
<CountContext.Provider value={count}>
</CountContext.Provider> </div>
)
}
export default Example4;
这段代码就相当于把count
变量允许跨层级实现传递和使用了(也就是实现了上下文),当父组件的count
变量发生变化时,子组件也会发生变化。接下来我们就看看一个React Hooks
的组件如何接收到这个变量。
useContext 接收上下文变量
已经有了上下文变量,剩下的就时如何接收了,接收这个直接使用useContext就可以,但是在使用前需要新进行引入useContext
(不引入是没办法使用的)。
import React, { useState , createContext , useContext } from 'react';
引入后写一个Counter
组件,只是显示上下文中的count
变量代码如下:
function Counter(){
const count = useContext(CountContext) //一句话就可以得到count
return (<h2>{count}</h2>)
}
得到后就可以显示出来了,但是要记得在<CountContext.Provider>
的闭合标签中,代码如下。
<CountContext.Provider value={count}>
<Counter />
</CountContext.Provider>
其实useContext
的用法比以前时简单很多,既然简单,就没必要讲解的那么难,希望小伙伴这节课都能get到知识点,完善自己的知识体系。
转自:https://jspang.com/posts/2019/08/12/react-hooks.html
最新文章
- FWaaS 实践: 允许 ssh - 每天5分钟玩转 OpenStack(119)
- xml dtd 内部dtd 外部DTD 公共DTD
- Hexo
- JBoss无规律自动关闭故障定位
- WPF-控件-层级控件-Menu-嵌套结构
- [c++]this指针理解
- DEDE常见的错误(转)
- Arduino 串口篇 Arduino发送二进制 send binary via RS232-to-USB to PC
- SQL 调用存储过程
- MySQL--如何快速对比数据
- Linux CentOS安装配置MySQL数据库
- MySQL基础知识-安装MySQL
- 第23章 Windows身份验证 - Identity Server 4 中文文档(v1.0.0)
- mongoDB 数据库操作
- LR12集合点设置和多个负载生成器策略
- ZIP、tar.gz压缩时排除指定目录
- OAuth2.0 协议的理解
- 2018-11-09 VS Code英汉词典插件v0.0.4-驼峰下划线命名
- [转帖]Linux 硬件和系统配置查看命令小结
- spark-windows(含eclipse配置)下本地开发环境搭建