React.js |Context的作用与用法
参照react官方文档，文章用于笔记整理。
Context是什么？
在react应用中，数据总是通过 props 自上而下进行传递。 这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题）。Context 可以共享对于一个组件树而言是“全局”的数据。这样就不必显式地通过组件树的逐层传递 props
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
//传递prop
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
//再传递prop
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}
使用context可以避免通过中间元素传递 props
//1.为 theme 创建一个 context，默认值为light
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
// 2.使用 Provider 传递theme。在这里，将 “dark” 传递下去
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// ！中间组件不必指明
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
class ThemedButton extends React.Component {
// 3.指定 contextType 读取 theme的context对象。
static contextType = ThemeContext;
// 4.React 会往上找到最近的 Provider，然后通过this.context读取Provider的value值。
render() {
return <Button theme={this.context} />;
}
}
Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。谨慎使用，因为这会使得组件的复用性变差
API
React.createContext
创建一个Context对象：
const MyContext = React.createContext(defaultValue);
Context.Provider
Context 对象会返回的一个Provider React 组件：
<MyContext.Provider value={某个值}/>
- Provider 接收一个 value 属性，传递给消费组件（provider React 组件内的组件）
- Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染
- 当消费组件没有匹配到 Provider ， Context对象的defaultValue 参数生效（注意：将 undefined 传递给 Provider 的 value 时，defaultValue 不会生效）
- Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
Class.contextType
如果使用public class fields 语法，可以用 static 初始化contextType。contextType指定了需要读取的Context对象：
class MyClass extends React.Component {
static contextType = MyContext;
render() {
let value = this.context;
}
}
更常用的是Class.contextType。Class.contextType可以对Context对象重赋值：
class MyClass extends React.Component {
//...
render() {
let value = this.context;
}
}
//重赋值
MyClass.contextType = MyContext;
挂载在 class 的 contextType 会被重赋值为一个由 React.createContext() 创建的 Context 对象。使你用 this.context 来访问最近 Context 值。可以在任何生命周期中访问到它
Context.Consumer
基于 context 值渲染React节点
<MyContext.Consumer>
{value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
这需要函数作为子元素（function as a child）这种做法。函数接收 context 值，返回一个 React 节点。传递给函数的 value 值等于离这个 context 最近的 Provider 提供的 value 值。
Context.displayName
在React DevTools 中对显示的context对象的名称进行更改
const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';
<MyContext.Provider> // 在 DevTools 中会显示"MyDisplayName.Provider"
示例01-动态Context
theme-context.js：储存themes对象和theme的context对象
//1. 声明一个themes对象储存主题 导出
export const themes = {
light: {
background: 'orange',
},
dark: {
background: '#eee',
},
};
//2. 创建context对象 导出
export const ThemeContext = React.createContext(
themes.dark //2.设置默认值dark
);
themed-button.js：创建一个加了主题的按钮组件（ThemedButton）
//1. 引入theme的context对象
import {ThemeContext} from './theme-context';
class ThemedButton extends Component {
render() {
let props = this.props;
return (
<button
{...props}
style={{backgroundColor: this.context.background}} //3. 读取值
/>
);
}
}
//2. context重赋值
ThemedButton.contextType = ThemeContext;
//4. 导出按钮组件
export default ThemedButton;
App.js
//1.引入context对象和themes对象
import {ThemeContext, themes} from './theme-context';
//2.引入按钮组件
import ThemedButton from './themed-button';
// 中间组件 放入按钮，用于切换主题
function Toolbar(props) {
return (
<ThemedButton onClick={props.changeTheme}>
Change Theme
</ThemedButton>
);
}
//父组件
class App extends Component {
constructor(props) {
super(props);
this.state = {
theme: themes.light,
};
//3.定义切换主题的事件
this.toggleTheme = () => {
this.setState(state => ({
theme:state.theme === themes.dark? themes.light:themes.dark,
}));
};
}
render() {
return (
<div>
{/* 4.给Context对象的Provider的value赋值*/}
<ThemeContext.Provider value={this.state.theme}>
{/* 5.prop赋值 传入事件*/}
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
{/* 6.用于对比，由于没有Provider提供value值，所以会读取context对象的默认值为dark */}
<div>
<Toolbar />
</div>
</div>
);
}
}
export default App
示例02-在嵌套组件中更新 Context
通过 context 传递一个函数，使得消费组件自行更新 context（场景：在嵌套很深的组件中更新 context ）：
theme-context.js
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
});
theme-toggler-button.js
import {ThemeContext} from './theme-context';
// 这个按钮组件不仅获取了 theme 值，也从 context 中获取到一个 toggleTheme 函数
function ThemeTogglerButton() {
return (
//Context.Consumer:基于 context 值渲染React节点
<ThemeContext.Consumer>
{({theme, toggleTheme}) => (
<button onClick={toggleTheme}
style={{backgroundColor: theme.background}}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
);
}
export default ThemeTogglerButton;
App.js
import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends Component {
constructor(props) {
super(props);
//1.定义事件
this.toggleTheme = () => {
this.setState(state => ({
theme:state.theme === themes.dark? themes.light:themes.dark,
}));
};
//2。定义state
this.state = {
theme: themes.light,
toggleTheme: this.toggleTheme,
};
}
render() {
// 3.给Provider的value赋值，包含了当前的主题和事件
return (
<ThemeContext.Provider value={this.state}>
<ThemeTogglerButton />
</ThemeContext.Provider>
);
}
}
示例03-消费多个 Context
为了确保 context 快速进行重渲染，React 需要使每一个 消费组件的 context 在组件树中成为一个单独的节点。
App.js
import ProfilePage from './ProfilePage'
// 1.创建主题context
const ThemeContext = React.createContext({
bgColor:'#eee',
fontColor:'balck'
});
// 2.创建用户context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends Component {
constructor(props){
super(props)
//3.设置在app组件的想要的状态
this.state = {
theme: {
bgColor:'orange',
fontColor:'white'
},
user: {
name:'Jack'
},
};
}
render() {
const {theme,user}=this.state
//4.给Provider的value传入值
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={user}>
<Content />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Content() {
//5.现在可以访问到Provider传过来的theme和user
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}
export default App
ProfilePage.js
export default function ProfilePage (props){
const {user,theme}=props
return(
//给style传入了一个对象
<div style={{display:'inline-block',padding:'5px 8px',backgroundColor:theme.bgColor,color:theme.fontColor}}>
{user.name}
</div>
)
}
可在分支10、11、12中获取示例源码
