useContext

useContext用于数据共享和createContext搭配使用

src/context/index.js:

import {createContext} from "react";

const UserContext = createContext()
const ThemeContext = createContext()

export {
    UserContext,
    ThemeContext
}

src/Father.js:

import {
    UserContext,
    ThemeContext
} from "./context";
import Child1 from "./Child1";
import Child2 from "./Child2";

const Father = () => {
    return (
        <UserContext.Provider value={{name:"scott",age:18}}>
            <ThemeContext.Provider value={{name:"dark",color:"#333"}}>
                <Child1/>
                <Child2/>
            </ThemeContext.Provider>
        </UserContext.Provider>
    )
}

export default Father

src/Child1.js

import {useContext} from "react";
import {ThemeContext, UserContext} from "./context";

const Child1 = () => {
    const user = useContext(UserContext)
    const theme = useContext(ThemeContext)
    return (
        <div style={{background:"#ccc"}}>
            child1:

            <ul>
                <li>user:{user.name} - {user.age}</li>
                <li>theme: {theme.name} -{theme.color}</li>
            </ul>
        </div>
    )
}

export default Child1

src/Child2.js

import {useContext} from "react";
import {ThemeContext} from "./context";

const Child2 = () => {
    const theme = useContext(ThemeContext)
    return (
        <div style={{background:theme.color}}>
            child2:{theme.name} -- {theme.color}
        </div>
    )
}

export default Child2