react之useConntext——便我们获取Context中的数据源——跨层级通信解决方案

useConntext

跨组件通信
以前只需：数据源，用provder包裹。Consumer消费，不直观，不优雅；
辅助钩子函数，方便函数组件使用context对象而去使用的。

---

conntext通信方式，使用reacat提供的Provider, Consumer 来完成共同数据源，即数据的生产者和消费者。

---

useContext 它是提供给函数组件用来方便的去调用context对象而使用，你不一定非要用，但是用它可以方便调用

---

appconnext.js文件；

import { createContext } from "react";
const conntext = createContext();
export const {Provider,Consumer} = conntext
export default conntext;

之前这种写法得配合 Consumer和回调函数返回值使用，特麻烦

• 使用组件来调用context中的数据，不太建议，因为这样不直观，也乱

import React, { useState, useContext } from 'react'
import { Provider, Consumer } from "./conntext/appconnext"
const Child1 = () => {
    return (
        <div>
            <h3>Child1</h3>
            <Consumer>
                {
                    (contextState) => (<div>{contextState.name}</div>)
                }
            </Consumer>
            <hr />
        </div>
    )
}
const App = () => {
    const [name, setName] = useState('张三')
    const changeName = name => setName(name)
    return (
        <div>
            <Provider value={{ name, changeName }}>{/* 提供数据源，包裹的是可以消费的组件 */}
                <Child1 />
            </Provider>
        </div>
    )
}

export default

使用useContext简化为数据源进行操作
Context对象解决跨层级组件通信方案
调用方案
💙Consumer 函数组件和类组件
🧡static contextType 针对于类组件
💚useContext 针对于函数组件
使用useContext可以方便我们获取Context中的数据源

import React, { useState, useContext } from 'react'
import ctx, { Provider, Consumer } from "./conntext/appconnext"
const Child2 = () => {
    const contextState = useContext(ctx)/* 使用useContext简化为数据源进行操作 */
    return (
        <div>
            <h3>Child2</h3>
            {contextState.name}
            <button
                onClick={() => {
                    contextState.changeName(Date.now() + '')
                }}
            >
                修改姓名
            </button>
        </div>
    )
}

const App = () => {
    const [name, setName] = useState('张三')
    const changeName = name => setName(name)
    return (
        <div>
            <Provider value={{ name, changeName }}>{/* 提供数据源，下面是消费组件 */}
                <Child1 />
                <Child2 />
            </Provider>
        </div>
    )
}

export default