React Context

前言：React Context是什么？

• 原因：传统的react组件，父组件向子组件进行传参，子组件通过props进行接收，再往复循环传递给更深层 次的子组件，这样是比较臃肿和麻烦的，所有有了 React Context
• Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性

示意图

1.0 在类组件中使用Context

• 在类组件中我们需要通过 React.createContext来进行新建一个content ，在父组件中通过 Provider(发布者)的value属性进行参数设置 。

• 在需要用更深次子组件中通过 Consumer(消费者) 获取到value上的值，从而达到跨组件传参的目的 。

  
  效果图

1.1 在parment.jsx 父组件中创建 Context

import React from 'react';
import Child from './child.jsx'

export const UserContext = React.createContext(); //创建Context 定义为“UserContext ”，并且输出

1.1.1 在parment.jsx 引入需要传参的组件，并且挂载 contextType

import React from 'react';
import Child from './child.jsx'
import GrandChild from './grandChild.jsx'

export const UserContext = React.createContext(); //创建Context 定义为“UserContext ”，并且输出

GrandChild .contextType = UserContext;   //需要传参的组件 

1.1.2 在parment.jsx 通过 Provider（发布者）value 属性传递参数

import React from 'react';
import Child from './child.jsx'
import GrandChild from './grandChild.jsx'

export const UserContext = React.createContext(); //创建Context 定义为“UserContext ”，并且输出

GrandChild .contextType = UserContext;   //需要传参的组件 
//父组件
export default class Parment extends React.Component {
    static contextType
    render() {
        //2, Context.Provider 标签注释掉，则传入默认的 
        return (
            <div>
                <UserContext.Provider value={{ userName: "zhangsang" }}>
                    <Child />
                </UserContext.Provider>
            </div>
        );
    }
}

1.2 在child.jsx 组建中正常引用 grandChild.jsx 组件

import React from 'react';
import GrandChild from './grandChild.js'  //引入组件

//用户信息 - 二级页面
export default class Child extends React.Component {
    render() {
        return (<GrandChild />);
    }
}

1.3.0 引入在parment.jsx 中定义的 context

import React from 'react';
import  { UserContext } from './parment.jsx'

1.3.1 通过Consumer（消费者）来获取传输的参数

import React from 'react';
import  { UserContext } from './parment.jsx'

class GrandChild extends React.Component {
    render() {
        // console.log(this.context, '===userBaseInfo');
        return (
            <div>
                用户名：{this.context.userName}
                <br />
                <UserContext.Consumer>
                    {(value) => {
                        return (<span>{value.userName}</span>);
                    }}
                </UserContext.Consumer>
            </div>
        );
    }
}

export default  GrandChild 

注： 如果想要在Consumer外使用参数，需要用this.context 进行获取

2.0 在hook 中使用Context

• 在hook组件中也是需要用React.createContext来进行新建一个content, 在父组件中通过 Provider(发布者)的value属性进行参数设置

• 但是， 可以通过内置的hook方法 useContext 来进行获取value上的值。

  
  样式图

2.1 在parment.jsx 父组件中创建 Context并且挂载传递参数

import React from 'react';
import Child from './child'

export const hookContext = React.createContext()

export default function UContext() {
    return (
      <div>
        // 当Provider 标签不在的时候，会渲染默认值
        <ThemeContext.Provider value={{ userName: "zhangsang" }}>
            <Child  />
        </ThemeContext.Provider>
      </div>
    );
}

2.2 在child.jsx 组建中正常引用 grandChild.jsx 组件

import React from 'react';
import GrandChild from './grandChild'

export default function Toolbar() {
    return (
        <div>
            <GrandChild />
        </div>
    );
}

2.3.0 引入在parment.jsx 中定义的 context 和useContext

import React, { useContext } from 'react';
import { hookContext } from './parment.jsx'

2.3.1 获取和使用参数

import React, { useContext } from 'react';
import { hookContext } from './parment.jsx'

export default function GrandChild() {
    const  value  = useContext(hookContext);
    return (
       <span>{value.userName}</span>
    );
}

结语

• 正是因为默认语言的可配置性，可以将系统设置成多语言系统
• 希望各位朋友能精通React ，这里有react 的 demo ，望多指教 。
  码云地址：react-question-v6
  码云地址 ：react-question-vite