React入門0x013: Context

mudiyouyou 發布于2019-08-23 13:44 / 3073人閱讀

摘要：創建消費者是一個組件，包裹在其中的函數組件可以訪問到聲明時候傳入的，并且在的變動的時候，再次渲染。使用效果整個栗子修改主題

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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