1. Context
在 React 使用过程中，公共信息，例如语言，主题等如何传递给每个组件呢
而当组件层级不多不少的时候，共享的数据也不多时，这个时候会稍微有些尴尬，用 props 会有点繁琐， 而用 Redux 又不至于。那就可以考虑 Context。
Context 可以实现隔层传递，只需要在顶层组件定义，然后在子组件中按需引入即可，从而避免了一层一层的手动传递 props 属性。
Context 使用并不复杂，直接看看具体使用示例吧：
顶层组件：
import React from 'react'
// 引入中间组件
import IntermediaryComponents from './IntermediaryComp'
// 通过 createContext 定义一个 context
export const ThemeContext = React.createContext('light')
/**
* 顶层组件，定义主题
*/
class Context extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: {
color: 'light', // light,dark
size: 'small', // small, middle, large
}
}
}
changeTheme = () => {
const theme = {
color: 'dark', // light,dark
size: 'large', // small, middle, large
}
this.setState({
theme
})
}
render() {
const { theme } = this.state;
return (
<div>
{/* 使用定义的 context 的 provider 做父容器，value 是传递的值, 如果需要传多个值，可以用对象封装一下 */}
<ThemeContext.Provider value={theme}>
<IntermediaryComponents />
</ThemeContext.Provider>
<hr />
{/* 修改顶层组件的主题，就能全局实现修改主题 */}
<button onClick={this.changeTheme}>修改主题</button>
</div>
)
}
}
export default Context;
中间组件：
import React from 'react'
import ThemeConsumerComp from './ThemeConsumerComp'
/**
* 中间组件，不做任何操作，只为引入下一级组件做隔层传递数据展示
*/
class IntermediaryComponents extends React.Component {
render() {
return (
<div>
<ThemeConsumerComp />
</div>
)
}
}
export default IntermediaryComponents;
接收组件：
import React from 'react'
// 引入对应的通过 createContext 创建的 context，一定要引入
import { ThemeContext } from './Theme'
/**
* 类组件接收隔层数据
*/
class ThemeConsumerComp extends React.Component {
render() {
return (
<div>
{/* 使用 ThemeContext.Consumer，在里面定义函数，参数就是顶层组件传的值 */}
<ThemeContext.Consumer>
{
// 这里 theme 的参数就是顶层组件传入的值，也可以用ES6对象的解构赋值{color, size}
(theme) => {
return (
<p>顶层组件定义的主题：颜色为{theme.color}, 大小为{theme.size}</p>
)
}
}
</ThemeContext.Consumer>
</div>
)
}
}
/**
* 函数组件接收隔层数据
*/
// const ThemeConsumerComp = () => {
// return (
// <div>
// <ThemeContext.Consumer>
// {
// (theme) => {
// return (
// <p>顶层组件定义的主题：颜色为{theme.color}, 大小为{theme.size}</p>
// )
// }
// }
// </ThemeContext.Consumer>
// </div>
// )
// }
export default ThemeConsumerComp;
2.useContext
与 Context 一样，在 React Hooks 中也提供了更加高级的一种组件中传递值的方式，不再需要一层一层的向下传递，而是可以隔层传递。
import React, { useContext } from 'react'
// 主题颜色
const themes = {
light: {
foreground: '#000',
background: '#eee',
},
dark: {
foreground: '#fff',
background: '#222',
},
}
// 创建 Context
const ThemeContext = React.createContext(themes.light)
/**
* 下面定义三个组件演示隔层传递
*/
const ThemeButton = () => {
const theme = useContext(ThemeContext)
return (
<button
style={{background: theme.background, color: theme.foreground}}
>
hello world
</button>
)
}
const Toolbar = () => {
return (
<>
<ThemeButton></ThemeButton>
</>
)
}
const HooksT = () => {
return (
<>
{/* ThemeContext.Provider */}
<ThemeContext.Provider value={themes.dark}>
<Toolbar></Toolbar>
</ThemeContext.Provider>
</>
)
}
export default HooksT;
想了解更多 hooks 的功能，可以看看我关于 React Hooks 的一篇文章。
