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;