4 contextHook

最新推荐文章于 2024-07-08 08:00:00 发布

Stephy_Yy

最新推荐文章于 2024-07-08 08:00:00 发布

阅读量95

点赞数

分类专栏： # react # hooks 系统学习文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120835068

版权

系统学习同时被 3 个专栏收录

112 篇文章 1 订阅

订阅专栏

react

35 篇文章 0 订阅

订阅专栏

hooks

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了React的Context API，包括createContext用于创建上下文，Foo组件使用Consumer消费上下文，Bar组件通过contextType静态属性访问上下文，以及Baz组件利用useContext Hook获取上下文值。通过Middle组件，展示了它们在同一个应用中的用法和区别。

摘要由CSDN通过智能技术生成

类组件createContext、静态属性contextType 与函数组件useContext 的对比

import { Component, createContext, useContext } from 'react'
const AppContext = createContext(0)
class Foo extends Component {
    render() {
        return (
            <AppContext.Consumer>
                {
                    value => (
                        'Foo:' + value
                    )
                }

            </AppContext.Consumer>
        )
    }
}
class Bar extends Component {
    static contextType = AppContext
    render() {
        const value = this.context
        return <>Bar:{value}</>
    }
}
const Baz = () => {
    const value = useContext(AppContext)
    return <>Baz:{value}</>
}
const Middle = () => {
    return (
        <>
            <AppContext.Provider value={888}>
                <Foo />
                <br />
                <Bar />
                <br />
                <Baz />
            </AppContext.Provider>
        </>
    )
}
export default Middle