React的Context的使用方法简介

context

定义: Context提供了一种方式，可以让数据在组件树中传递，而没必要一级一级手动传递。

API : createContext(defaultValue?)。

使用方法：

首先要引入createContext

 

import React, { Component, createContext } from 'react';

 

 而后建立一个Context 

const BatteryContext = createContext();

 

而后用BatteryContext.Provider包裹组件而且传递属性值。

<BatteryContext.Provider value={60}>
     <Middle />　　//子组件
</BatteryContext.Provider>

 

 为了方便看出效果，将定义一个子组件和一个孙组件。而后不经过子组件，孙组件直接取值。

import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //声明一个孙组件
class Leaf extends Component { render() { return ( ) } } //声明一个子组件
class Middle extends Component { render() { return <Leaf /> 
 } } class App extends Component { render(){ return ( <BatteryContext.Provider value={60}>
        <Middle />
      </BatteryContext.Provider>
 ); } } export default App;

 

孙组件须要BatteryContext.Consumer来接收值，Consumer里面不能直接渲染其余组件，而是要声明一个函数。函数的参数就是context的值。

class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => <h1>Battery : {battery}</h1>
 } </BatteryContext.Consumer>
 ) } }

 

 效果图；

 

这样没经过Middle组件来传递值，可是Leaf组件能经过context来得到属性。这就是context的基本用法。

 

context不但能跨层级来传递属性值，还能在属性值发生变化的时候重渲染Consumer下面的元素，举个例子:

 

在state中定义battery并赋值

state = { battery: 60 }

 

而后作一个按钮，每次点击的时候都要battery减一。  代码:

render() { const { battery } = this.state; return ( <BatteryContext.Provider value={battery}>
        <button type="button" onClick={() => this.setState({ battery: battery - 1 })} > 减减 </button>
        <Middle />
      </BatteryContext.Provider>
 ); }

 

所有代码:

import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //声明一个孙组件
class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => <h1>Battery : {battery}</h1>
 } </BatteryContext.Consumer>
 ) } } //声明一个子组件
class Middle extends Component { render() { return <Leaf />
 } } class App extends Component { state = { battery: 60 } render() { const { battery } = this.state; return ( <BatteryContext.Provider value={battery}>
        <button type="button" onClick={() => this.setState({ battery: battery - 1 })} > 减减 </button>
        <Middle />
      </BatteryContext.Provider>
 ); } } export default App;

 

 效果图: 

 

这样每次点击都会使battery得数值发生变化，从而重渲染Consumer下面的元素。

 

若是有多个Context该怎么作呢?咱们在建立一个 Context

const OnLineContext = createContext();

 

若是有多个context变量的话，只须要把Privider嵌套进来便可，顺序不重要。接下来声明online的Provider了。

class App extends Component { state = { battery: 60, online: false } render() { const { battery, online } = this.state; return ( <BatteryContext.Provider value={battery}>
        <OnLineContext.Provider value={online} >
          <button type="button" onClick={() => this.setState({ battery: battery - 1 })} > 减减 </button>
          <button type="button" onClick={() => this.setState({ online: !online })} > Switch </button>
          <Middle />
        </OnLineContext.Provider>
      </BatteryContext.Provider>
 ); }

 

与Provider相似。Consumer也须要嵌套，顺序不重要。只要Consumer须要声明函数，因此要注意语法。

class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => ( <OnLineContext.Consumer> { online => <h1>Battery : {battery} , Online : {online.toString()}</h1>
 } </OnLineContext.Consumer>
 ) } </BatteryContext.Consumer>
 ) } }

 

 所有代码:

import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); const OnLineContext = createContext(); //声明一个孙组件
class Leaf extends Component { render() { return ( //与Provider相似。Consumer也须要嵌套，顺序不重要。只要Consumer须要声明函数，因此要注意语法。
      <BatteryContext.Consumer> { battery => ( <OnLineContext.Consumer> { online => <h1>Battery : {battery} , Online : {online.toString()}</h1>
 } </OnLineContext.Consumer>
 ) } </BatteryContext.Consumer>
 ) } } //声明一个子组件
class Middle extends Component { render() { return <Leaf />
 } } class App extends Component { state = { battery: 60, online: false } render() { const { battery, online } = this.state; //接下来声明online的Provider了。若是有多个context变量的话，只须要把Privider嵌套进来便可，顺序不重要。
    return ( <BatteryContext.Provider value={battery}>
        <OnLineContext.Provider value={online} >
          <button type="button" onClick={() => this.setState({ battery: battery - 1 })} > 减减 </button>
          <button type="button" onClick={() => this.setState({ online: !online })} > Switch </button>
          <Middle />
        </OnLineContext.Provider>
      </BatteryContext.Provider>
 ); } } export default App;

 

效果图:

 

 

还有一个问题 , 若是Consumer向上找不到对应的Provider怎么办？

 

其实即便找不到也不会报错，而是显示为空。那怎么设置默认值呢？

 

那上面的demo举例 ，刚才咱们设置的battery为60。若是Consumer向上找不到BatteryContext.Provider的值，咱们能够这样设置默认值:

const BatteryContext = createContext(30);

这样BatteryContext.Consumer向上找不到值，就会取默认值30。

 

context不单单只是能够传数值，也能够传函数。你们能够试试看。

最后再提示一下你们，不要滥用context，否则会影响组件的独立性。 若是一个组件中只使用一个Context的话，就可使用contextType代替Consumer。详见http://www.javashuo.com/article/p-rfricsbm-mn.html