React Hooks 之 useContext

React.createContext

Defined in parent component:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const defaultValue = {
    
     // defaultValue为共享的默认数据
    username: 'bing'
}

export const appContext = React.createContext(defaultValue);  // 创建一个上下文的容器(组件)

ReactDOM.render(
    <React.StrictMode>
        <appContext.Provider value={
    
    defaultValue}>
            <App />
        </appContext.Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

• Provider(生产者): Like his name, it is used to produce shared data. What to produce depends on what the value defines
• value: put shared data

---

In subcomponents use:

import React from 'react';
import {
    
     appContext } from './index'

const App = () => {
    
    
    return (
        <appContext.Consumer>
            {
    
    (value) => {
    
    
                return (
                    <div>{
    
    value.username}</div>
                )
            }}
        </appContext.Consumer>
    );
}

export default App;

• Consumer(消费者): This can be understood as a consumer, who is specialized in consuming data generated by suppliers ( Provider).
  <Consumer />The childrenmust be a function, obtained through the parameters of the function <Provider />provided byContext

---

useContext

Use useContextto transform the above subcomponent:

import React, {
    
     useContext } from 'react';
import {
    
     appContext } from './index'

const App = () => {
    
    
    const value = useContext(appContext); // 使用useContext的hook
    return (
        <div>{
    
    value.username}</div>
    );
}

export default App;

The hook used useContextgreatly simplifies the hierarchical structure of the code

---

Re-optimize unified management

srcCreate a new file under AppState.tsx:

import React, {
    
     useState } from 'react';

const defaultValue = {
    
    
    username: 'zhangsan',
    age: 20
}

export const appContext = React.createContext(defaultValue);

// 组件化provider
export const AppStateProvider = (props) => {
    
    
    const [state, setState] = useState(defaultValue);
    return <appContext.Provider value={
    
    state}>{
    
    props.children}</appContext.Provider>
}

Parent component changed to:

import React from 'react';
import App from './App';
import {
    
     AppStateProvider } from './AppState'

ReactDOM.render(
    <React.StrictMode>
        <AppStateProvider>
            <App />
        </AppStateProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Subcomponent changed to:

import React, {
    
     useContext } from 'react';
import {
    
     appContext } from './AppState'

const App = () => {
    
    
    const val = useContext(appContext)
    return (
        <div>{
    
    val.username}</div>
    );
}

export default App;