React手稿 - Context
Context
Context
提供了除props
之外的传参数的方式。
Context
是全局跨组件传递数据的。
API
React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);
Provider
<Provider value={/* some value */}>
Consumer
<Consumer>
{value => /* render something based on the context value */}
</Consumer>
Example
ThemeContext.js
import React from 'react';
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export default React.createContext(
themes.dark // default value
);
ThemedButton.jsx
import React from 'react';
import ThemeContext, {themes} from './ThemeContext';
export default ({children}) => {
const styles = {
color: themes[theme].foreground,
backgroundColor: themes[theme].background
};
return (
<ThemeContext.Consumer>
{theme => {
return (
<button style={styles}>{children}</button>
)
}}
</ThemeContext.Consumer>
);
}
App.js
import React, {PureComponent} from 'react';
import ThemeContext from './ThemeContext';
import ThemeButton from './ThemedButton';
export default class extends PureComponent {
constructor(props) {
super(props);
this.state = {theme: 'dark'};
}
render() {
return (
<ThemeContext.Provider value={this.state.theme}>
<ThemeButton>
<div onClick={() => {
this.setState({theme: this.state.theme === 'dark' ? 'light' : 'dark'})
}}>Themed Button</div>
</ThemeButton>
</ThemeContext.Provider>
);
}
}
推荐阅读《React 手稿》
React手稿 - Context的更多相关文章
- React 手稿 - Component state
Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...
- React手稿之 React-Saga
Redux-Saga redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更 ...
- 手写一个React-Redux,玩转React的Context API
上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...
- React手稿之State Hooks of Hooks
React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...
- React Hooks & Context API
React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...
- 【react】---context的基本使用新版---【巷子】
一.全局定义context对象 globalContext.js import React from "react"; const GlobalContext = React.cr ...
- 【react】---context的基本使用---【巷子】
一.context的理解 很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的stor ...
- React 新 Context API 在前端状态管理的实践
本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...
- React 中 context 的使用
官方文档说明(英) 看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,半翻译半理解地写了这篇博客,更易于新手理解. 介绍 context 是在 react @ 0. ...
随机推荐
- SpringCloud创建Eureka
Eureka是什么 Eureka是Netflix的一 个子模块,也是核心模块之一- .Eureka是一 个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对于微服务 ...
- python-hasattr()、getattr()、setattr()函数的使用
python中hasattr().getattr().setattr()函数 class A(): name = 'python' def __init__(self): setattr(self._ ...
- jzoj6404. 【NOIP2019模拟11.04】B
题目描述 Description Input 从文件b.in中读入数据. 第丬行三个正整数 n, m, K. 接下来 n 行每行 m 个正整数, 表示矩阵A. Output 输出到文件b.out中. ...
- CF 480 B Long Jumps (map标记)
题目链接:http://codeforces.com/contest/480/problem/B 题目描述: Long Jumps Valery is a PE teacher at a ...
- winXP 系统下ubuntu-12.04 硬盘安装
目地:实现XP ubuntu双系统,引导可选择. 出处:根查阅网络资料和自己的安装体检,记录如是. 系统版本:windowsXP SP3 Ubuntu 12.04 工具资源:grup4dos 2 ...
- (26)Python获取某个文件存放的相对路径(更改任意目录下保持不变)
import os import platform def getSeparator(): ''' 获取不同平台下的斜杠符号 :return: Created by Wu Yongcong 2017- ...
- 用CSS代码编写简易轮播图
废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...
- CentOS yum 安装历史版本 java
1.以1.6为例,找到对应版本 $ yum --showduplicate list java* |grep 1.6 java--openjdk.x86_64 :1.6.0.41-1.13.13.1. ...
- 使用Mybatis执行sql脚本
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- Jeecg心得篇--这个世界不缺程序员,而是缺少匠人和架构师
真正的快乐,是用自己喜欢的方式过完这一生.来人间一趟,不能只为了活着. 这个世界不缺程序员,而是缺少匠人精神的架构师与产品经理. 因为他们通过自己的行为与理念默默地改变着世界,一个更好的世界. 这是我 ...