关于react.js:React10React-Context技术2

前言

承接上一篇对于React Context技术的文章。React Context技术在页面主题批改利用上提供了较好的办法,同时React还提供了ContextType技术,用于实现对Context技术进行简化书写。本篇文章对这两个概念进行解说,最初再解说Context默认值的应用办法。

在开始正式解说之前, 再次强调React Context的性能:实现组件之间的数据传递。


一、案例:更改页面的主题

1、案例要求

页面中有两个超级链接,用于管制页面中内容的主题色彩。两个超级链接别离是“浅色主题”和“深色主题”。为了拆穿主题的更改,在页面中还设置了一个div容器,深浅色主题对应该div容器不同的背景色彩。div容器中有文本和一个命令按钮,深浅色主题也对应着文本的不同色彩和按钮的不同款式。案例的最终效果图如下所示。

2、案例剖析

首先,咱们要在所有组件以外预设好两个主题的参数。依据对效果图的察看,两个不同的主题次要对应的是背景色彩、文本色彩、按钮色彩三个组成部分。布局具体的主题参数如下所示。

在上述表中,为按钮色彩布局的是Bootstrap框架中的两种不同的按钮背景色彩类。如果不应用Bootstrap,也能够在CSS文件中独立书写这两个类,并为这两个类设置不同的外观。

依照上述表中的外观布局,定义一个themes的对象,蕴含两种主题款式,代码如下所示。

const themes={
  light:{
    className:'btn btn-primary',
    backgroundColor:'#ddd',
    color:'#000'
  },
  dark:{
    className:'btn btn-danger',
    backgroundColor:'#222',
    color:'#fff'
  }
};

3、案例组件划分

其次,咱们来为这个案例进行组件划分。很显然,咱们能够将其划分为两个组件:

  • 父组件<App />:实现扭转主题的超级链接和整个案例的布局。
  • 子组件<Content />:实现案例下方的<div>容器和其外部的文本与按钮。

4、<App />组件的实现

在书写组件<App />时,要先创立Context对象,并解构出生产组件和生产组件。

const {Provider,Consumer} = React.createContext();

为了能将用户所选的主题传递给子组件,来让子组件扭转款式,咱们须要在父组件中创立一个state数据,命名为themeData。该数据的默认值为‘light’,示意默认为浅色主题。当用户单击深色主题超级链接时,扭转themeData数据的值为‘dark’。同时将这个themeData作为数据传递给子组件。

<App />组件的代码如下所示。

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      themeData:'light'
    }
  }
  changeTheme(data){
    this.setState({
      themeData:data
    })
  }
  render(){
    return (
      <Provider value={this.state.themeData}>
        <div className="theme">
          <a href="#" onClick={()=>this.changeTheme('dark')}>深色主体</a>
          <a href="#" onClick={()=>this.changeTheme('light')}>浅色主题</a>
        </div>
        <Content></Content>
      </Provider>
    )
  }
}

5、<Content />组件的实现

该组件作为<App />组件的生产组件,要是用<Consumer>组件接管<App />组件传来的数据。即接管的数据为一个字符串:‘light’或‘dark’。而后再从示意主题的themes对象中,寻找对应字符串成员的各种款式取值。

<Content />组件的代码如下所示。

class Content extends Component {
  render(){
    return (
      <Consumer>
        {
          data=>{
            return (
              <div className="content" style={{backgroundColor:themes[data].backgroundColor,color:themes[data].color}}>
                欢送应用Context技术 <button className={themes[data].className}>确定</button>
              </div>
            )
          }
        }      
      </Consumer>
    )
  }
}

二、ContextType技术

ContextType技术是React设定的Context技术的简写模式,应用ContextType技术能够省略书写<Consumer>标记对。
ContextType的书写格局有如下规定:

  • 必须为创立的Context对象设置一个对象名,且无需解构出Consumer。
  • 在生产组件的render()函数内部,要定义一个动态变量,并赋值为创立的Context对象名。
  • 在生产组件的render()函数外部,return语句之前,应用this.context来接管生产组件传递过去的参数。

把上述案例整体改写为ContextType技术,其书写格局如下所示。

const themeContext=React.createContext();
const {Provider} = themeContext;
class Content extends Component{
  static contextType = themeContext;
  render(){
    const para=this.context;    //para就是接管到的生产组件传来的数据
    return (
      <div className="content" style={{backgroundColor:themes[para].backgroundColor,color:themes[para].color}}>
        欢送应用Context技术 <button className={themes[para].className}>确定</button>
      </div>
    )
  }
}

三、Context的默认值

在利用React.createContext()办法创立Context对象时,该办法是具备参数的,该参数是Context的默认值。格局如下所示。

const {Provider,Consumer} = React.createContext(defaultValue);

若想让该默认值失效,则生产组件无需应用进行包裹,这样生产组件只能承受到defaultValue传递过去的数据。即没有被<Provider>包裹的组件只能获取Context的defaultValue,也只能向生产组件传递defaultValue的值。


总结

本文是React系列教程的第十篇文章,在上一讲的根底之上持续解说了React Context的用法。本篇文章次要包含React Context在批改页面主题性能上的利用,以及ContextType技术的简化写法,并为大家解说了带有默认值的Context是如何应用的。

第一讲 初识React框架

第二讲 意识JSX语法格局

第三讲 React组件

第四讲 React 父子组件之间的通信

第五讲 React兄弟组件之间的通信

第六讲 React受控组件的应用

第七讲 React非受控组件的应用

第八讲 React组件的生命周期

第九讲 React Context技术(1)

对于作者

小海前端,具备18年Web我的项目开发和前后台培训教训,在前端畛域著有较为零碎的培训教材,对Vue.js、微信小程序开发、uniApp、React等全栈开发畛域都有较为深的造诣。入住Segmentfault,心愿可能更多地结识Web开发畛域的同仁,将Web开发鼎力地进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据