【 React 】几种共享数据的方式 ！_react 数据共享

React与Vue 数据通信相同，属于单向数据流，所以非父子组件共享数据用常规方法，代码会变得非常冗余。所以下面介绍了几种数据共享的方法。

1、React 提供的 Context 类似Vue中的 Provid Reject

• 初始化：React.createContext() 用来创建共享数据上下文对象

const defaultValue = {
   
	a:1,
	b:2,
	c:3
}
//创建对象并导出
const MyContext  = React.createContext(defaultValue)
export default = MyContext
1
2
3
4
5
6
7
8
9

• 应用：有两种用法

第一种，在组建中注册contextType，然后获取

// 底层组件 - class 组件
import Context from "../../"
class app extends React.Component {
   
    // 指定 contextType 读取当前的 theme context。
    render() {
   
        const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。
        return
1
2
3
4
5
6
7
8