React入门0x013: Context

mudiyouyou 发布于2019-08-23 13:44 / 3075人阅读

摘要：创建消费者是一个组件，包裹在其中的函数组件可以访问到声明时候传入的，并且在的变动的时候，再次渲染。使用效果整个栗子修改主题

0x000 概述

Context就是全局state啦～～

0x001 问题

先上栗子，我们需要在Topbar中用到theme，但是theme必须从最外层传入，所以必须从最外层传入App，再传入TopBar，这只传递了两次，但是如果全部组件都需要theme呢？或者有一个非常深的组件需要theme，而中间的大部分组件都不需要theme呢？为了传递这个theme必须一层一层的传递下去，有点难受。

class TopBar extends React.Component {
    redder() {
        return 
            {this.props.theme}
        
    }
}

class App extends React.Component {
    render() {
        return 
            
        
    }
}


ReactDom.render(
    ,
    document.getElementById("app")
)

0x002 解决

Context可以解决这个问题，上栗子：

创建context

const ThemeContext = React.createContext("theme");

React.createContext创建了一个context，它返回一个对象，可以打印出来：

需要注意的是：

Consumer：消费者

Provider：提供者

创建提供者

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            theme: "dark"
        }
    }

    render() {
        return (
            
                
                
            
        );
    }

    handleChangeTheme() {
        this.setState({
            theme: this.state.theme === "light" ? "dark" : "light"
        })
    }
}

ThemeContext.Provider是一个组件，value属性提供的值在所有的Consumer中都可以访问到，前提是必须包裹在Provider中。

创建消费者

class ThemedButton extends React.Component {

    render() {
        return 
            {
                (value) => {value}
            }
        
    }
}

ThemeContext.consumer是一个组件，包裹在其中的函数组件可以访问到ThemeContext.Provider声明时候传入的value，并且在ThemeContext.Provider的value变动的时候，再次渲染。

使用

ReactDom.render(
    ,
    document.getElementById("app")
)

效果

整个栗子：

import ReactDom from "react-dom"
import React from "react"

const ThemeContext = React.createContext("theme");

class ThemedButton extends React.Component {

    render() {
        return 
            {
                (value) => {value}
            }
        
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            theme: "dark"
        }
    }

    render() {
        return (
            
                
                
            
        );
    }

    handleChangeTheme() {
        this.setState({
            theme: this.state.theme === "light" ? "dark" : "light"
        })
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

云服务器 GPU云服务器 Context 获取context stacking-context Android全局Context

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99484.html

es6基础0x013：WeakSet

摘要：概述和差不多，但是有一些不同只能存储对象，不能存储任意值不可迭代是弱引用，也就是如果没有变量引用内的值，很容易被回收初始化因为只能存储对象，所以这里我想只能传入类似对象数组之类的东西对象数组添加判断是否已经有了删除弱引用特性后输出，可以看到 0x000 概述 WeakSet和Set差不多，但是有一些不同： WeakSet只能存储对象，不能存储任意值 WeakSet不可迭代 We...

trigkit4 2019-08-23 13:09 评论0 收藏0
React入门系列 - 2 编写第一个Hello world的React程序

摘要：安装必要的开发包安装两个包安装编写一个的首先我们编写一个的组件但是这仅仅是一个组件，我们需要一个页面来容纳的组件。到这一步，需要准备的东西已经完成了。 2.1 采用create react app 编写 create-react-app项目 [[点击前往Github]](https://github.com/facebook/c... 是facebook推出的入门初始化项目，适合新手第...

PingCAP 2019-08-23 14:37 评论0 收藏0
React入门0x017: 函数组件

摘要：概述函数组件其实就是一个函数，一个函数。所以可以用来做一些快速的封装，比如，一个组件的代码太多，显得咋乱，又没有复杂到需要另起一个组件，可以用函数组件源码这是标题栏这是导航栏哈哈效果总结没有多余的东西，对性能也有所提升哦 0x000 概述函数组件其实就是一个函数，一个render函数。 0x001 栗子源码 import React from react import Reac...

weapon 2019-08-23 13:50 评论0 收藏0
React 可视化开发工具 Shadow Widget 非正经入门（之二：分离界面设计）

摘要：本篇讲解转义标签投影定义，这几项与如何分离界面设计有关。找一个替代品如上一篇非正经入门之一所述，要克服浆糊的不利影响，要找一个替代品。本文完本专栏历史文章介绍一项让可以与抗衡的技术可视化开发工具非正经入门之一三宗罪本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇讲解转义标签、json-x、投影定义，这几项与如何分离界面设计有关。 1. 找一个 ...

Carl 2019-08-21 11:44 评论0 收藏0