zoukankan      html  css  js  c++  java
  • react中的context的基础用法

    context提供了一种数据共享的机制,里面有两个关键概念——provider,consumer,下面做一些key features描述。

    参考网址:https://react.docschina.org/docs/context.html#reactcreatecontext

    consumer:

    数据消费者,消费来自己向上回溯过程中,离自己最近的provider提供的数据。

    consumer接收一个函数作为子节点,函数返回一个react节点;函数可以消费来自context的值(即最近provider提供的数据)进行内部JSX语法渲染。

    provider:

    数据提供者,一个provider下的所有消费者都可以消费来自该provider的数据。

    provider接收一个value属性,这个属性讲被provider提供给其consumer子节点。

    一个provider可对应多个consumer。

    生成一对{ provider, consumer}

     

    基本上关于Context相关的主要特性都介绍完了,一个完整的demo如下:

    theme-context.js

    export const themes = {
      light: {
        foreground: '#ffffff',
        background: '#222222',
      },
      dark: {
        foreground: '#000000',
        background: '#eeeeee',
      },
    };
    export const ThemeContext = React.createContext( 
      themes.light //默认值
      );

    themed-button.js

    import React from 'react';
    import {themes,ThemeContext} from './theme-context';
    class ThemeCircle extends React.Component{
      render(){
        return (<ThemeContext.Consumer>
          { theme => (<div
            style={{
              "60px",
              height:"60px",
              borderRadius:"30px",
              backgroundColor: theme.background}}>
            {/* Circle */}
            </div>) }
        </ThemeContext.Consumer>
        );
      }
    }
    class ThemedButton extends React.Component{
      constructor( props ){
        super(props);
      }
      render(){
        return (<ThemeContext.Consumer>
          { theme => (<button
            onClick = {this.props.changeTheme}
            {...this.props}
            style={{
              backgroundColor:theme.background,
              color:theme.foreground,
              "100px",
              height:"45px",
              fontSize:"14px",
              borderRadius:"5px",
              border:"none"}}
          />) }
        </ThemeContext.Consumer>);
      }
    }
    // class ToolBar extends React.Component{//一个用到ThemedButton的中间件
    //   constructor( props ){
    //     super(props);
    //   }
    //   render(){//以此种方式直接触发父级事件?
    //     return (<ThemedButton onClick={this.props.changeTheme}>
    //       Change Theme
    //     </ThemedButton>);
    //   }
    // }
    class CustomizedApp extends React.Component{
      constructor( props ){
        super(props);
        this.state = {
          theme: themes.light
        };
        this.handleChangeTheme = this.handleChangeTheme.bind( this );
      }
      handleChangeTheme(){
        //必须有一个机制可以修改provider的value,以引起订阅者consumer的变更
        this.setState( state => ({
          theme: state.theme === themes.light?themes.dark:themes.light
        }) );
      }
      render(){
        return (<div>
          <ThemeContext.Provider value={this.state.theme}>
            {/* <ToolBar changeTheme={this.handleChangeTheme} /> */}
            <ThemedButton changeTheme={this.handleChangeTheme}>
              Toggle
            </ThemedButton>
            <ThemeCircle />
          </ThemeContext.Provider>
        </div>);
      }
    }
    export default CustomizedApp;

    然后在Router里配置调用“CustomizedApp”组件就可以了。

     路漫漫其修远其,吾将上下而求索——May stars guide your way.

    路漫漫其修远兮,吾将上下而求索。 May stars guide your way⭐⭐⭐
  • 相关阅读:
    3.29Java流程控制语句之循环结构
    3.27Java自动类型转化
    3.27Java流程控制语句
    3.27字符串连接符
    计算机系统概论
    《算法导论》第12章 二叉查找树 (2)查找、插入与删除
    《算法导论》第14章 数据结构的扩张 (1)动态顺序统计
    《算法导论》第12章 二叉查找树 (3)基数树
    关于算法学习的总结和感悟(原创)
    《Windows游戏编程大师技巧》二、Windows编程模型
  • 原文地址:https://www.cnblogs.com/surfer/p/10775961.html
Copyright © 2011-2022 走看看