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

Posted 2022-10-10 勇敢*牛牛

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 App

使用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 App