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的更多相关文章

  1. React 手稿 - Component state

    Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...

  2. React手稿之 React-Saga

    Redux-Saga redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更 ...

  3. 手写一个React-Redux,玩转React的Context API

    上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...

  4. React手稿之State Hooks of Hooks

    React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...

  5. React Hooks & Context API

    React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...

  6. 【react】---context的基本使用新版---【巷子】

    一.全局定义context对象 globalContext.js import React from "react"; const GlobalContext = React.cr ...

  7. 【react】---context的基本使用---【巷子】

    一.context的理解 很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的stor ...

  8. React 新 Context API 在前端状态管理的实践

    本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...

  9. React 中 context 的使用

    官方文档说明(英) 看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,半翻译半理解地写了这篇博客,更易于新手理解. 介绍 context 是在 react @ 0. ...

随机推荐

  1. SpringCloud创建Eureka

    Eureka是什么 Eureka是Netflix的一 个子模块,也是核心模块之一- .Eureka是一 个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对于微服务 ...

  2. python-hasattr()、getattr()、setattr()函数的使用

    python中hasattr().getattr().setattr()函数 class A(): name = 'python' def __init__(self): setattr(self._ ...

  3. jzoj6404. 【NOIP2019模拟11.04】B

    题目描述 Description Input 从文件b.in中读入数据. 第丬行三个正整数 n, m, K. 接下来 n 行每行 m 个正整数, 表示矩阵A. Output 输出到文件b.out中. ...

  4. CF 480 B Long Jumps (map标记)

    题目链接:http://codeforces.com/contest/480/problem/B 题目描述:     Long Jumps   Valery is a PE teacher at a ...

  5. winXP 系统下ubuntu-12.04 硬盘安装

    目地:实现XP ubuntu双系统,引导可选择. 出处:根查阅网络资料和自己的安装体检,记录如是. 系统版本:windowsXP  SP3   Ubuntu 12.04 工具资源:grup4dos 2 ...

  6. (26)Python获取某个文件存放的相对路径(更改任意目录下保持不变)

    import os import platform def getSeparator(): ''' 获取不同平台下的斜杠符号 :return: Created by Wu Yongcong 2017- ...

  7. 用CSS代码编写简易轮播图

    废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...

  8. 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. ...

  9. 使用Mybatis执行sql脚本

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  10. Jeecg心得篇--这个世界不缺程序员,而是缺少匠人和架构师

    真正的快乐,是用自己喜欢的方式过完这一生.来人间一趟,不能只为了活着. 这个世界不缺程序员,而是缺少匠人精神的架构师与产品经理. 因为他们通过自己的行为与理念默默地改变着世界,一个更好的世界. 这是我 ...