[JavaScript知识库] React的Context到底怎么用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React的Context到底怎么用 -> 正文阅读

[JavaScript知识库]React的Context到底怎么用

文章导航

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

Class组件

1. 创建全局共享的数据源

这里定义了需要共享的数据 appState，同时创建了 Context 对象，并提供了一个包装组件(包装组件是为了方便渲染)。
当然，也可以将 appState 定义在单独的文件中

this.props.children 指的是当前组件的子组件，这样就能保证把呗当前组件包裹的组件作为消费者，实现数据共享。

📄 store.js

import React, { Component, createContext } from 'react';
// 创建Context
const AppContext = createContext({})
const { Provider } = AppContext
// 需要共享的数据
let appState = {
  data: 'default'
}
// 包装组件
class AppStore extends Component {
  render () {
    return (
    	// 把需要共享的值传到 value，不要忽略 this.props，避免造成数据 props 数据丢失
      <Provider value={appState} {...this.props}>
        {this.props.children}
      </Provider>
    );
  }
}

2. 创建消费者组件及其子组件

Class.contextType

消费者组件中，一种方式引入创建的 AppContext 对象，并把对象绑定到类组件中。绑定有两种方式：

在类组件内部 static contextType = AppContext;
在类组件外部 ClassComponent.contextType = AppContext

这里为了更明显的体现效果，创建了消费者组件和它的子组件。

📄 ChildClassComponent.js

import React, { Component } from 'react';
import { AppContext } from './store'

class ChildClassComponent extends Component {
  static contextType = AppContext;
  render () {
    console.log(this.context)
    return (
      <div>
        {this.context.data}
      </div>
    );
  }
}

export default ChildClassComponent;

📄 ClassComponent.js

import React, { Component } from 'react';
import { AppContext } from './store';
import ChildClassComponent from './ChildClassComponent';

class ClassComponent extends Component {
	// 将 Context 挂载到 contextType 上，就能直接通过 this.context 访问
  static contextType = AppContext;
  render () {
    console.log(this.context)
    return (
      <div>
        {this.context.data}
        <ChildClassComponent />
      </div>
    );
  }
}
// or write like this
// ClassComponent.contextType = AppContext；
export default ClassComponent;

Context.Consumer

还有一种方式时使用 Consumer 包裹子组件，Consumer 需要接受一个函数作为子元素。
这里仅对消费者的子组件进行了改写演示
📄 ChildClassComponent.js

import React, { Component } from 'react';

import { Consumer } from './store'
class ChildClassComponent extends Component {
  render () {
    return (
      <Consumer>
        {({ data }) => <div>消费者子组件:{data}</div>}
      </Consumer>
    );
  }
}

export default ChildClassComponent;

3. 将消费者作为包装组件的子组件

📄 index.js

import React, { Component } from 'react';
import ClassComponent from "./ClassComponent";
import { AppStore } from './store'

class MyApp extends Component {
  render () {
    return (
      <AppStore {...this.props}>
        <ClassComponent />
      </AppStore>
    );
  }
}

export default MyApp;

在外部直接引用 MyApp 就可以了，效果如下图：
在这里插入图片描述
不知道看到这里会不会有疑问，既然引入Context 再绑定到组件上，是不是不用包装组件包裹也能用？
肯定不行呢！只有在 Context.Provider 的任意子(孙)节点中才能获取到。

Function组件

函数组件与类组件最大的区别就是在 消费者组件 中使用 useContext() 来绑定 Context。将上述 Class 组件改为 Function 组件即可。