前言：React Context是什么？

• 原因：傳統(tǒng)的react組件，父組件向子組件進(jìn)行傳參，子組件通過props進(jìn)行接收，再往復(fù)循環(huán)傳遞給更深層 次的子組件，這樣是比較臃腫和麻煩的，所有有了 React Context
• Context 通過組件樹提供了一個(gè)傳遞數(shù)據(jù)的方法，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性

示意圖

1.0 在類組件中使用Context

• 在類組件中我們需要通過 React.createContext來(lái)進(jìn)行新建一個(gè)content ，在父組件中通過 Provider(發(fā)布者)的value屬性進(jìn)行參數(shù)設(shè)置 。

• 在需要用更深次子組件中通過 Consumer(消費(fèi)者) 獲取到value上的值，從而達(dá)到跨組件傳參的目的 。

  
  
  效果圖

1.1 在parment.jsx 父組件中創(chuàng)建 Context

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

export const UserContext = React.createContext(); //創(chuàng)建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(); //創(chuàng)建Context 定義為“UserContext ”，并且輸出

GrandChild .contextType = UserContext;   //需要傳參的組件 

1.1.2 在parment.jsx 通過 Provider（發(fā)布者）value 屬性傳遞參數(shù)

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

export const UserContext = React.createContext(); //創(chuàng)建Context 定義為“UserContext ”，并且輸出

GrandChild .contextType = UserContext;   //需要傳參的組件 
//父組件
export default class Parment extends React.Component {
    static contextType
    render() {
        //2, Context.Provider 標(biāo)簽注釋掉，則傳入默認(rèn)的 
        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'  //引入組件

//用戶信息 - 二級(jí)頁(yè)面
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（消費(fèi)者）來(lái)獲取傳輸?shù)膮?shù)

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外使用參數(shù)，需要用this.context 進(jìn)行獲取

2.0 在hook 中使用Context

• 在hook組件中也是需要用React.createContext來(lái)進(jìn)行新建一個(gè)content, 在父組件中通過 Provider(發(fā)布者)的value屬性進(jìn)行參數(shù)設(shè)置

• 但是， 可以通過內(nèi)置的hook方法 useContext 來(lái)進(jìn)行獲取value上的值。

  
  
  樣式圖

2.1 在parment.jsx 父組件中創(chuàng)建 Context并且掛載傳遞參數(shù)

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

export const hookContext = React.createContext()

export default function UContext() {
    return (
      <div>
        // 當(dāng)Provider 標(biāo)簽不在的時(shí)候，會(huì)渲染默認(rèn)值
        <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 獲取和使用參數(shù)

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

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

結(jié)語(yǔ)

• 正是因?yàn)槟J(rèn)語(yǔ)言的可配置性，可以將系統(tǒng)設(shè)置成多語(yǔ)言系統(tǒng)
• 希望各位朋友能精通React ，這里有react 的 demo ，望多指教 。
  碼云地址：react-question-v6
  碼云地址 ：react-question-vite