React-Hooks-useContext

useContext Hook 概述

• useContext 相当于类组件中的 static contextType = Context

博主这里直接就是以两种不同的方式消费的代码贴在下方自己体会下就知道为啥要介绍 useContext Hook 了示例一：

import React, {createContext} from 'react';

const UserContext = createContext({});
const ColorContext = createContext({});

function Home() {
    return (
        <UserContext.Consumer>
            {
                value1 => {
                    return (
                        <ColorContext.Consumer>
                            {
                                value2 => {
                                    return (
                                        <div>
                                            <p>{value1.name}</p>
                                            <p>{value1.age}</p>
                                            <p>{value2.color}</p>
                                        </div>
                                    )
                                }
                            }
                        </ColorContext.Consumer>
                    )
                }
            }
        </UserContext.Consumer>
    )
}

export default function App() {
    return (
        <UserContext.Provider value={{name: 'BNTang', age: 18}}>
            <ColorContext.Provider value={{color: 'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
    )
}

使用 useContext Hook：

import React, {createContext, useContext} from 'react';

const UserContext = createContext({});
const ColorContext = createContext({});

function Home() {
    const user = useContext(UserContext);
    const color = useContext(ColorContext);
    return (
        <div>
            <p>{user.name}</p>
            <p>{user.age}</p>
            <p>{color.color}</p>
        </div>
    )
}

export default function App() {
    return (
        <UserContext.Provider value={{name: 'BNTang', age: 18}}>
            <ColorContext.Provider value={{color: 'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
    )
}

使用了之后直接通过 useContext 就可以直接将生产者的数据进行绑定然后获取到，使用起来非常方便。