5、react-useContext简单应用

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法 。
主要应用场景：为不同层级的组件提供访问同样数据。

1. 创建一个共享的UserInfoContext文件

userInfoContext.js

import React from 'react'
export const UserInfoContext = React.createContext(null)

2. 在顶层组件Parent.js中，传递需要共享的数据

import React from 'react'
import { UserInfoContext } from './userInfoContext'
import Children from './children'

export const Parent = () => {
    const userInfo = {
        name: 'xx',
        age: 22
    }
    return (
        <UserInfoContext.Provider value={userInfo}>
            <Children></Children>
        </UserInfoContext.Provider>
    )
}

3. 子组件 children.js

import React, { useContext } from 'react'
import { UserInfoContext } from './userInfoContext'
import { GrandSon } from './grandSon';
function Children() {
    const name = useContext(UserInfoContext) //此处可以获取到父组件传来的userInfo数据
    console.log(name); //{name: 'xx', age: 22}
    return (
        <GrandSon></GrandSon>
    )
}
export default Children

4. 在孙子组件grandSon.js中，同样也可以拿到顶层组件Parent.js传来的userInfo数据

import React, { useContext } from "react";
import { UserInfoContext } from "./userInfoContext";
export const GrandSon = () => {
    const { name, age } = useContext(UserInfoContext)
    console.log(name, age); //xx 22
    return (
        <div>
            <p>姓名: {name}</p>
            <p>年龄: {age}</p>
        </div>
    )
}```