React Context 理解和使用
基本概念
Context是 react中为了避免在不同层级组件中逐层传递props的产物，在没有Context的时候父组件向子组件传递props属性只能在组件树上自上而下进行传递，但是有些属性并不是组件树的每层节点都有相同的需求，这样我们再这样逐层传递props就显得代码很繁琐笨重。
使用react.createContext(defulData)可以通过创建一个ContextObject，在某个组件中调用ContextObject.Provider同时可以设置新的value = newData覆盖掉defulData共享到下面的所有子组件，需要ContextObject共享出来的数据的子组件可以通过static contextType = ContextObject接收到data，使用this.context即可调用data
适用场景
很多不同层级的组件需要访问同样的数据，所以如果我们只是想避免层层传递一些属性，那么我们还有更好的选择： 组合组件
Context API 理解与运用
React.createContext(defaultValue)
创建一个Context对象，defaultValue是默认参数，在一个组件中可以调用这个对象的ProviderAPI，并且设置新的参数：
但是如果没有对应的Context.Provider相匹配，那么组件树上的所有组件都可以收到这个Context对象发出 的defaultValue；
同时可以调用Context的ConsumerAPI可以用来接受到Context的值，并且根据这个值渲染组件：
Context.Provider & Context.Comsumer
<MyContext.Provider value={ variableValue }>可以允许消费组件订阅到variableValue 值的变化，也就是说消费组件可以根据variableValue值的变化而变化，variableValue的值我们可以定义一个事件来控制改变；
利用Context.Consumer API 可以让我们即使是在函数式组件也可以订阅到 Context的值；
这种方法需要一个函数作为子元素，函数接收当前的context值，并返回一个 React 节点。
传递给函数的 value 值等价于组件树上方离这个 context 最近的 Provider 提供的 variableValue值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。
当Provider的 variableValue值发生变化时，它内部的所有消费组件都会重新渲染。
Class.contextType
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。此属性能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。
注： 从文档的字面意思，Class.contextType是类组件特有的API，所以函数式组件只能使用 Context.Consumer来访问 Context对象的值，我们可以来试一下类组件和函数式组件的API:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 创建 Context 对象
const MyContext = React.createContext(0)
// App组件 渲染 Context 对象
class App extends React.Component {
constructor(props){
super(props);
this.state = {
variableValue : 0
}
this.handleChange = () => {
this.setState(state => ({
variableValue: state.variableValue + 1
})
)
}
}
render(){
return (
// 调用 Context.Provider, 设置可以让Consumer组件监听变化的 value 值
<MyContext.Provider value = {this.state.variableValue}>
<Context_consumer changeValue = {this.handleChange} />
<br/>
<Context_contextType changeValue = {this.handleChange} />
<br />
<Func_Consumer changeValue = {this.handleChange} />
<br />
<func_contextType changeValue = {this.handleChange} />
</MyContext.Provider>
)
}
}
// Class & Consumer 消费组件
class Context_consumer extends React.Component{
render(){
return (
<MyContext.Consumer>
{value =>
<button onClick={this.props.changeValue} >
Add Class_consumer:{value}
</button>
}
</MyContext.Consumer>
)
}
}
// Class & contextType 的消费组件
class Context_contextType extends React.Component{
render(){
let value = this.context
return (
<button onClick={this.props.changeValue} >
Add Class_contextType:{value}
</button>
)
}
};
Context_contextType.contextType = MyContext;
// 函数组件 & Consumer
function Func_Consumer (props) {
return (
<MyContext.Consumer>
{value =>
<button onClick={props.changeValue} >
Add Func_consumer:{value}
</button>
}
</MyContext.Consumer>
)
}
// 函数组件 & contextType
function func_contextType (props) {
let value = this.context
return (
<button onClick={props.changeValue} >
Add func_contextType:{value}
</button>
)
}
func_contextType.contextType = MyContext;
ReactDOM.render(
<App className = 'app'/>
,
document.getElementById('root')
);运行结果：
除了func_contextType组件之外其他组件都可以正常运行
http://www.ssnd.com.cn 化妆品OEM代加工
Context.displayName
context 对象接受一个名为 displayName 的 property，类型为字符串。React DevTools 使用该字符串来确定 context 要显示的内容。
示例，下述组件在 DevTools 中将显示为 MyDisplayName：
