假设我们有如下结构的程序，App组件由Main组件和Login组件组成；
class App extends React.Component {
state = {
user: User
}
loginHandler = user => {
this.setState({ user: user })
}
logoutHandler = () => {
this.setState({ user: null })
}
render() {
return this.state.user
?
(<Main user={this.state.user} onLogout={this.logoutHandler}></Main>)
:
(<Login onLogin={this.loginHandler}></Login>)
}
}
Main组件由Header组件和MessageList组件组成；
const Main = ({ user, onLogout }) => (
<main>
<Header user={user} onLogout={onLogout} />
<MessageList user={user} />
</main>
)
Header组件由Menu组件组成；
const Header = ({ user, onLogout }) => (
<header>
<h2>我的邮件</h2>
<Menu user={user} onLogout={onLogout}></Menu>
</header>
)
Menu组件；
class Menu extends React.Component {
state = {
visible: false
}
avatarRef = React.createRef()
componentDidMount() {
document.addEventListener('click', this.hideMenu)
}
componentWillUnmount() {
document.removeEventListener('click', this.hideMenu)
}
hideMenu = e => {
if (e.target !== this.avatarRef.current) {
this.setState({ visible: false })
}
}
toggleMenu = () => {
this.setState(state => ({ visible: !state.visible }))
}
render() {
return (
<div>
<img
src={this.props.user.avatar}
onClick={this.toggleMenu}
ref={this.avatarRef}
/>
{this.state.visible && (
<ul>
<li onClick={this.props.onLogout}>退出登录</li>
</ul>
)}
</div>
)
}
}
Login组件；
class Login extends React.Component {
state = {
username: '',
password: '',
error: null,
loading: false
};
inputChangeHandler = e => {
this.setState({
[e.target.name]: e.target.value
});
};
submitHandler = e => {
e.preventDefault();
this.setState({ loading: true, error: null });
login(this.state.username, this.state.password)
.then(user => {
this.setState({ loading: false });
this.props.onLogin(user);
})
.catch(error => this.setState({ error, loading: false }));
};
render() {
const { username, password, error, loading } = this.state;
return (
<div>
<form onSubmit={this.submitHandler}>
<label>
用户名
<input
name="username"
value={username}
onChange={this.inputChangeHandler}
/>
</label>
<label>
密码
<input
name="password"
type="password"
value={password}
onChange={this.inputChangeHandler}
/>
</label>
{error && <div>{error.message}</div>}
<button type="submit" disabled={loading}>登录</button>
</form>
</div>
);
}
}
我们看到，App组件中持有user对象来判断显示Main组件还是Login组件；遵循Main组件这条线，我们发现最后一个组件是Menu组件，发现Menu组件也要使用user对象，因此我们不得不使用props来从App传递user。线路是这样地：Main -> Header -> Menu，但Main组件和Header组件其实是不需要user对象的；和Header组件同级的MessageList组件也需要user对象，因此也要给MessageList设置一个属性用来传递user对象。假如Menu组件是在第100层呢，中间那些无辜的组件们都得硬生生地加上一个属性来传递user对象。丑陋啊，忍不了！终于，React带来了解决方案，Context。废话少说，看看咋用这个玩意。
新建个文件名为UserContext.js。内容如下：
import React from 'react';
//创建一个Context
const Context = React.createContext();
export default Context;
简单吧，人如其名，Context，一个环境，只要大家同处在这个环境中，这个环境中的一切都可以为大家共享，为大家所用。当然，现在这个环境中还空无一物，我们进去了也没啥可用的。
好吧，让我们往这个环境中扔点什么，譬如user对象，不是Menu小朋友要用吗？好了，万事俱备，只欠插入，让谁插入到这个环境中？谁要用user谁插入。Menu插入吗？不行，Menu组件中没有user对象啊，必须在有user对象的环境中进行插入，也就是App组件。我们又知道Menu组件是跟Main组件混的，Main有的吃，Menu肯定有的吃。所以，我们把Main组件插入到环境中，Main和Main的子子孙孙都可以使用user对象了，眼见为实：
class App extends React.Component {
state = {
user: User
}
loginHandler = user => {
this.setState({ user: user })
}
logoutHandler = () => {
this.setState({ user: null })
}
render() {
return this.state.user
?
(
<UserContext.Provider value={this.state.user}>
<Main onLogout={this.logoutHandler}></Main>
</UserContext.Provider>
)
:
(<Login onLogin={this.loginHandler}></Login>)
}
}
别忘了导入UserContext.js啊，我们在扔对象进环境的地方使用Provider，并为value属性赋值为该对象。然后，我们把Main组件插入到环境中，也就是JSX组件嵌套。
下面看看Menu组件怎么使用user：
class Menu extends React.Component {
state = {
visible: false
}
avatarRef = React.createRef()
componentDidMount() {
document.addEventListener('click', this.hideMenu)
}
componentWillUnmount() {
document.removeEventListener('click', this.hideMenu)
}
hideMenu = e => {
if (e.target !== this.avatarRef.current) {
this.setState({ visible: false })
}
}
toggleMenu = () => {
this.setState(state => ({ visible: !state.visible }))
}
render() {
return (
<UserContext.Consumer>
{
user => (
<div>
<img
src={user.avatar}
onClick={this.toggleMenu}
ref={this.avatarRef}
/>
{this.state.visible && (
<ul>
<li onClick={this.props.onLogout}>退出登录</li>
</ul>
)}
</div>
)
}
</UserContext.Consumer>
)
}
}
我们看到在返回组件的时候，我们用Consumer把整个JSX包了起来。怎么使用user，代码说明一切，把user当做参数传递到返回JSX的函数中，自然JSX中就可以使用user了。然后Main、Header、Menu组件的user属性都可以删掉了。干的漂亮！
使用Context的姿势是，创建Context对象，在JSX中，扔进共享变量，并插入含有准备使用共享变量的组件的地方用Provider，使用共享变量的地方用Consumer，Consumer里用大括号，大括号里用函数，共享变量当入参，返回值为render函数返回的组件，在组件中自然可以使用共享变量。就这么简单，赶紧用起来！
漏了个helper.js。App组件和Menu组件要用到。
export const User = {
name: 'du1dume',
username: 'du1dume',
avatar: 'https://www.gravatar.com/avatar/'
}
//模拟后台登录
export function login(username, password) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (username === 'du1dume' && password === 'du1dume') {
resolve(User)
} else {
reject({ message: '无效的用户名或密码' })
}
}, 2000)
})
}
