React中Context的使用,跨组件传值

Context 是什么？

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。有点像Vuex
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些场景来说是繁琐的,
Context 提供了一种在组件之间共享此类值的方式，不用通过组件树的逐层传递 props。

使用Context

自定义Context
src/store/testContext.js

*   Context相当于一个公共的存储空间，
*       我们可以将多个组件中都需要访问的数据统一存储到一个Context中，
*       这样无需通过props逐层传递，即可使组件访问到这些数据
*   通过React.createContext()创建context

import React from 'react';

const TestContext = React.createContext({
    name:'孙悟空',
    age:18
});
export default TestContext;

使用方式一

1.引入context
2.使用 Xxx.Consumer 组件来创建元素
Consumer 的标签体需要一个回调函数
它会将context设置为回调函数的参数，通过参数就可以访问到context中存储的数据

A.js(渲染到页面)

import React from "react";
import TestContext from "../store/testContext";
export default function A() {
  return (
    <div>
      我是A组件
      <TestContext.Consumer>
        {(ctx) => {
          return (
            <div>
              {ctx.name}-{ctx.age}
            </div>
          );
        }}
      </TestContext.Consumer>
    </div>
  );
}

使用方式二

1.导入Context
2.使用钩子函数useContext()获取到context
useContext() 需要一个Context作为参数
它会将Context中数据获取并作为返回值返回

import React, { useContext } from "react";
import TestContext from "../store/testContext";
export default function A() {
  const ctx = useContext(TestContext);
  return (
    <div>
      {ctx.name} -- {ctx.age}
    </div>
  );
}

Xxx.Provider正式使用Context中的数据

- 表示数据的生产者，可以使用它来指定Context中的数据
- 通过value来指定Context中存储的数据，
这样一来，在该组件的所有的子组件中都可以通过Context来访问它所指定数据

当我们通过Context访问数据时，他会读取离他最近的Provider中的数据，
 如果没有Provider，则读取Context中的默认数据

app.js

import TestContext from "../src/store/testContext";
export default function App() {
 return (
  <div>
 <TestContext.Provider value={{ name: "猪八戒", age: 28 }}>  这里value的内容才是Context真正的内容,
        <A></A>                                              达到组件数据共享
 </TestContext.Provider>
  </div>
)
}

Context讲解链接