React的contextType的使用方法简介

有范發表於 2019-7-21 17:10:00

上一篇介绍了Context的使用方法。但是Context会让组件变得不纯粹，因为依赖了全局变量。所以这决定了Context一般不会大规模的使用。所以一般在一个组件中使用一个Context就好。
<div>由于Consumer的特性，里面的代码必须是这个函数的返回值。这样就显得复杂与不优雅了。那该怎么解决呢？这样contextType就派上用场了。</div>
<div> </div>
还拿上一篇的demo来举例。并且修改它。上一篇的代码:
<div class="cnblogs_code">
<pre>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 {
render(){
return (
 <BatteryContext.Provider value={60}>
 <Middle />
 </BatteryContext.Provider>
 );
}
}

export default App;</pre>
</div>
 
 接下里我们修改他，使他更加优雅一些:
我们只需要修<Leaf/>组件的代码就可以。
 
首先我们用static来声明contextType:
<div class="cnblogs_code">
<pre>static contextType = BatteryContext;</pre>
</div>
 
 
<div>这样在运行时就可以获取到一个新的属性。我们来接收他。</div>
<div>
<div class="cnblogs_code">
<pre>const battery = this.context;</pre>
</div>
 
<div>这样Consumer就可以完全不再使用了。</div>
<div>
<div class="cnblogs_code">
<pre> return<h1>Battery : {battery}</h1> </pre>
</div>
 
</div>
</div>
 全部代码:
<div class="cnblogs_code">
<pre>import React, { Component, createContext } from 'react';

const BatteryContext = createContext();

//声明一个孙组件
class Leaf extends Component {
static contextType = BatteryContext;
render() {
const battery = this.context;
return<h1>Battery : {battery}</h1>
}
}

//声明一个子组件
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;</pre>
</div>
 
 
效果图:
<img src="https://img2018.cnblogs.com/blog/1557620/201907/1557620-20190721170825033-735541269.jpg" alt="">
 
<div>效果和使用Consumer没有什么区别。可见只有一个Context的时候，使用contextType要比使用Consumer简单的多。</div>
  
来源：https://www.cnblogs.com/littleSpill/p/11221817.html

頁: [1]

琼殿技术论坛's Archiver

React的contextType的使用方法简介