React Hooks 之 useContext

React.createContext

在父组件中定义：

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(生产者)​​： 和他的名字一样，用于生产共享数据的地方。生产什么，那就看value定义的是什么了
• ​​value​​：放置共享的数据

子组件中使用：

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(消费者)​​​：这个可以理解为消费者， 他是专门消费供应商(​​Provider​​​)产生数据。
  ​​​<Consumer />​​​的​​children​​​ 必须是一个函数，通过函数的参数获取​​<Provider />​​​ 提供的​​Context​​

useContext

使用 ​​useContext​​ 对上面的子组件进行改造：

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;

使用​​useContext​​的hook，极大的简化了代码的层级结构

再次优化 统一管理

在​​src​​​下新建​​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>
}

父组件改为：

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

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

子组件改为：

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

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

export default App;