Context 是什么
- 一种状态管理，跟 redux、mobx 差不多。
- 在React的单向数据流中，复杂的嵌套组合中，底层使用数据，需要使用props层层传递，context 可以避免深层传递，直接使用状态管理。
- 当外层 Provider 的值发生变更了，内层的 Consumer 会触发渲染
Context 怎么使用
Provider Consumer 模式（生产消费者）
- 通过引入 react 暴露的 createContext 创建实例。
import { createContext } from 'react';
const DataContext = createContext();
- 使用 Provider 产生传递的数据。
class App extends React.Component {
render () {
return (
<DataContext.Provider value={'testData'}>
{this.props.children}
</DataContext.Provider>
);
}
}
- 使用 Consumer 使用上层对应数据，注意需要使用对应实例获取 Consumer。
class SubApp extends React.Component {
render () {
return (
<DataContext.Consumer>
{data => <p>{data}</p>}
</DataContext.Consumer>
);
}
}
ContextType 使用数据时更简单
- 通过引入 react 暴露的 createContext 创建实例。
import { createContext } from 'react';
const DataContext = createContext();
- 使用 Provider 产生传递的数据。
class App extends React.Component {
render () {
return (
<DataContext.Provider value={'testData'}>
{this.props.children}
</DataContext.Provider>
);
}
}
- 将 Context 传递给 classComponent 的 contextType 属性，React.Component 会将其数据引用传递给组件内部 context 属性。
class SubApp extends React.Component {
static contextType = DateContext;
render () {
return (
<DataContext.Consumer>
<p>{this.context}</p>
</DataContext.Consumer>
);
}
}
- 所以你会发现，React.component 内部做的引用变更，变更到 context，所以我们能得出一些 ContextType 的使用限制。
-
- 只能在 ClassCompoent 中使用 ContextType，因为ClassComponent 内部会做 context 得引用变更。
- 单个组件无法使用多个 Context 数据实例，因为内部使用单一 context 属性做引用。
拓展
怎么将含有 ContextType 的 ClassComponnts 改成FunctionComponents。
方法一
使用 Provider Consumer 模式去使用 Context，这样就不依赖 ClassComponent 内部对 context 得引用处理。
方法二
使用官方提供 useContext 的 hooks 进行替换使用
