react中context的使用详解

原创

已于 2022-04-27 11:11:43 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

于 2021-08-09 16:28:08 首次发布

本文详细介绍了React中的Context特性，主要用于解决多层级组件间通信的问题，避免繁琐的props传递。通过创建和使用Context，可以在任意层级的组件中直接获取到父组件的数据。文章通过一个实例展示了如何在index父组件、child1子组件和child2孙组件之间使用Context进行数据传递，并提供了store.js中创建数据和Context的步骤，以及在index.jsx和child2组件中接收和使用Context的步骤。

先说一说context是干什么的：

跨层级通信

一般组件通信的方法都是通过props来传递，不过这种方法当有了第三级或往后孙孙组件的时候就显得比较繁琐。以及不好修改。这时我们可以使用context来管理这些数据，不管多少层级都能让想要使用这些数据的组件能拿到。还有别的方法，mobx或redux。这些可以自行了解

说一下文件目录以及思路：

创建index文件作为父组件，child1组件为子组件，child2为子子组件。同级下创建一个store.js中存放数据和创建context。

index中呢引入child1组件，child1组件呢引入child2组件。我们现在要做的就是不使用props在child2中获取index父级的数据。

store.js ：

可以分为三步：1.引入React。2.创建数据。3.创建导出context

import React from 'react';

这里我们可以定义数据格式
export const Resume = {
    base: {
        name: '',
        age: ''
    },
    exp: {
        year: '',
        job: ''
    },
    lists: [],
}

通过createContext创建context并导出
export const ResumeContext = React.createContext(Resume);