React中的Context-JXin的博客

温馨提示

该文章距离上次更新已经过去了 763 天，文章内容可能已经过时。

Context 是什么？
Context 有什么用？
Context 如何使用？
Context 和 Redux 有什么区别？

Context 是什么？

Context 叫做上下文，它是用来解决组件之间数据共享问题的，避免一层一层的传递

Context 有什么用？

React中的Context

在 React 中数据传递都是单向的，所以如果组件之间要进行数据传递时，就必须想把数据一层一层的传递到共同的父组件，再通过父组件一层一层的传递下去，例如上图中如果组件 C 和组件 F 要进行数据传递，那么就必须把数据线传递到组件 A ，然后组件 A 再将数据传递给组件 F

Context 就是用来解决这个问题的，它提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法

Context 如何使用？

React中的Context

先通过 React.createContext 创建一个 Context 对象

const MyContext = React.createContext(defaultValue);

Context 对象中有两个值 Provider 和 Consumer， Provider 负责挂载需要共享的数据，而 Consumer 则负责接收数据

创建一个 Context 对象：

import React from "react";

const MyContext = React.createContext();

export default MyContext;

1
2
3
4
5

使用 Provider 挂载数据：

import { useState } from "react";
import Coma from "./Coma";
import MyContext from "./Context";

function App() {
  const [name, setName] = useState('sjxlife');
  return (
    <MyContext.Provider value={{name, setName}}>
      <Coma />
    </MyContext.Provider>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用 Consumer 接收数据：

import MyContext from "./Context";

function Coma() {
  return (
    <MyContext.Consumer>
      {(context) => {
        console.log(context)
        return <div>name: {context.name}</div>;
      }}
    </MyContext.Consumer>
  );
}

export default Coma;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

React中的Context

嵌套使用 Context

Context 是可以嵌套使用的，例如：

import { useState } from "react";
import Coma from "./Coma";
import MyContext from "./Context";
import MyContext1 from "./Context/index1";

function App() {
  const [name, setName] = useState("sjxlife");
  const [age, setAge] = useState(18);
  return (
    <MyContext.Provider value={{ name, setName }}>
      <MyContext1.Provider value={{ age, setAge }}>
        <Coma />
      </MyContext1.Provider>
    </MyContext.Provider>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import MyContext from "./Context";
import MyContext1 from "./Context/index1";

function Coma() {
  return (
    <MyContext.Consumer>
      {(context) => {
        console.log(context);
        return (
          <MyContext1.Consumer>
            {(context1) => {
              console.log(context1);
              return (
                <>
                  <div>name: {context.name}</div>
                  <div>age: {context1.age}</div>
                </>
              );
            }}
          </MyContext1.Consumer>
        );
      }}
    </MyContext.Consumer>
  );
}

export default Coma;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

React中的Context

displayName

React中的Context

如果有多个 Context ，可以看到它的树结构命名都是一样的，这样容易混淆，这时候可以通过 displayName 来更改命名，例如：

import React from "react";

const MyContext = React.createContext({ name: "1234" });

MyContext.displayName = "name"

export default MyContext;

1
2
3
4
5
6
7

import React from "react";

const MyContext = React.createContext();

MyContext.displayName = "age"

export default MyContext;

1
2
3
4
5
6
7

Context中的displayName

可以看到现在命名被更改了

Context 的默认值

Context 是可以设置默认值的，但是如果设置了默认值，就不再需要 Provider 组件来提供数据了

import React from "react";

const MyContext = React.createContext(defaultValue); // defaultValue 为默认值

export default MyContext;

1
2
3
4
5

Context 的 hook

在函数组件中，可以通过 useContext 来获取数据，但是还是需要通过 Provider 来挂载数据

import { useContext } from "react";
import MyContext from "./Context";

function Coma() {
  const { name } = useContext(MyContext);
  return <div>name: {name}</div>;
}

export default Coma;

1
2
3
4
5
6
7
8
9

类组件可以通过静态属性来获取数据

import React from "react";
import MyContext from "./Context";

class Coma extends React.Component {
  static contextType = MyContext;

  render() {
    return <div>{this.context.name}</div>;
  }
}

export default Coma;

1
2
3
4
5
6
7
8
9
10
11
12

或者

import React from "react";
import MyContext from "./Context";

class Coma extends React.Component {
  render() {
    return <div>{this.context.name}</div>;
  }
}

Coma.contextType = MyContext;

export default Coma;

1
2
3
4
5
6
7
8
9
10
11
12

Context 和 Redux 有什么区别？

Context 和 Redux 的作用相似，实际上，Redux 的实现原理就是基于 Context 所进行的一层封装