React入門0x013: Context

mudiyouyou 發(fā)布于2019-08-23 13:44 / 3080人閱讀

摘要：創(chuàng)建消費(fèi)者是一個(gè)組件，包裹在其中的函數(shù)組件可以訪問到聲明時(shí)候傳入的，并且在的變動(dòng)的時(shí)候，再次渲染。使用效果整個(gè)栗子修改主題

0x000 概述

Context就是全局state啦～～

0x001 問題

先上栗子，我們需要在Topbar中用到theme，但是theme必須從最外層傳入，所以必須從最外層傳入App，再傳入TopBar，這只傳遞了兩次，但是如果全部組件都需要theme呢？或者有一個(gè)非常深的組件需要theme，而中間的大部分組件都不需要theme呢？為了傳遞這個(gè)theme必須一層一層的傳遞下去，有點(diǎn)難受。

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

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


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

0x002 解決

Context可以解決這個(gè)問題，上栗子：

創(chuàng)建context

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

React.createContext創(chuàng)建了一個(gè)context，它返回一個(gè)對(duì)象，可以打印出來：

需要注意的是：

Consumer：消費(fèi)者

Provider：提供者

創(chuàng)建提供者

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是一個(gè)組件，value屬性提供的值在所有的Consumer中都可以訪問到，前提是必須包裹在Provider中。

創(chuàng)建消費(fèi)者

class ThemedButton extends React.Component {

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

ThemeContext.consumer是一個(gè)組件，包裹在其中的函數(shù)組件可以訪問到ThemeContext.Provider聲明時(shí)候傳入的value，并且在ThemeContext.Provider的value變動(dòng)的時(shí)候，再次渲染。

使用

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

效果

整個(gè)栗子：

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")
)