天津差旅管家商旅服务有限公司网站优化公司收费

背景：在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性，你可以直接在React中使用强大的contextAPI 解决上述问题

在一个典型的React 中，数据通过Props属性自下而上（由父及子）进行传递的，但这种做法对于某些类型的属性而言机器繁琐，（地区偏好，UI主题）这些属性是应用程序中许多组件都需要的。Context提供了一种在组件之间共享此值的方式，而不必显式的通过组件树逐层传递props

contextType只能用在类组件里
Consumer一般用在函数组件中

import React from './react';
import ReactDOM from './react-dom';
let ThemeContext = React.createContext();
/* let ThemeContext = React.createContext();
let { Provider, Consumer } = ThemeContext; */
//ThemeContext={Provider,Consumer} Consumer一般用在函数组件中
function Header(){return (<ThemeContext.Consumer>{value=>(<div style={{ margin: '10px', border: `5px solid ${value.color}`, padding: '5px' }}>头部</div>)}</ThemeContext.Consumer>)
}
class Main extends React.Component {static contextType = ThemeContextrender() {return (<div style={{ margin: '10px', border: `5px solid ${this.context.color}`, padding: '5px' }}>主体<Content /></div>)}
}
class Content extends React.Component {static contextType = ThemeContextrender() {return (<div style={{ margin: '10px', border: `5px solid ${this.context.color}`, padding: '5px'}}>内容<button onClick={()=>this.context.changeColor('red')}>变红</button><button onClick={()=>this.context.changeColor('green')}>变绿</button></div>)}
}
class Page extends React.Component {constructor(props) {super(props);this.state = { color: 'red' };}changeColor = (color) => {this.setState({ color });}render() {let contextValue = { color: this.state.color, changeColor: this.changeColor };return (<ThemeContext.Provider value={contextValue}><div style={{ margin: '10px', border: `5px solid ${this.state.color}`, padding: '5px', width: '200px' }}>主页<Header /><Main /></div></ThemeContext.Provider>)}
}
ReactDOM.render(<Page />, document.getElementById('root'));

react.js中相关代码

function createContext(){function Provider({value,children}){Provider._value = value;return children;}function Consumer({children}){return children(Provider._value);}return {Provider,Consumer};
}