React Context

2022 年 7 月 27 日
本文字数：1256 字
阅读完需：约 4 分钟

`Context`

什么是 `Context`

数据共享，任何组件都可访问 Context 数据。
在 React 中，组件数据通过 prop 来达到自上而下的传递数据，要想实现全局传递数据，那么可以使用 Context .
注意：
Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

使用 `Context`

在使用之前要关注 Context 4 个 api
创建 Context 对象
React.createContext( )
Class.contextType 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象，可以使用this.context 来赋值最近 Context 上的那个值，在生命周期和 render 中都可以使用。
GlobalContext.Provider 用来包裹组件传递数据，在传递数据时，直接在 Provider 后面绑定传递值即可。
GlobalContext.Consumer 用来接受 Provider 传递过来的数据

import React  from 'react';
 const GlobalContext  = React.createContext() export default GlobalContext

复制代码

import React from 'react';import GlobalContext from './Context/CommonContext' const ReceiveContext = () => {    return (        <GlobalContext.Consumer>            {                obj => {                  console.log(obj.menuList)                  return (                      <ul>                          {obj.menuList.map(item => {                              return <li>{item.title}</li>                          })}                      </ul>                  )                }            }

        </GlobalContext.Consumer>
    )}export default ReceiveContext;

复制代码

/* * @Description:  * @Author: ZhangXin * @Date: 2021-02-13 19:03:00 * @LastEditTime: 2021-02-13 20:11:30 * @LastEditors: ZhangXin */import React, { Component } from 'react';import GlobalButton from './Context/GlobalButton'import ShowButton from './ShowButton'
const obj = {    btnManage: [        {            id: 1,            title: '关闭'        },        {            id: 2,            title: '打开'        }    ]}
class Buttons extends Component {    constructor(props) {        super(props);        this.state = {
        }    }    componentDidMount() {        //  Buttons.contextType = GlobalButton   挂载到Class中 创建的 context 对象，可以通过this.context 来消费它的内容        console.log(this.context)    }    render() {        return (            <GlobalButton.Provider value={obj}>                <div>                    <h2>Button  管理</h2>                    <ShowButton></ShowButton>
                </div>            </GlobalButton.Provider>        );    }}Buttons.contextType = GlobalButtonexport default Buttons;

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/c716ddffd1f56983ef1579397】。文章转载请联系作者。

程序员海军

关注

还未添加个人签名 2020.04.02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆2021年InfoQ写作平台-签约作者 🏆 🏆微信公众号：【前端自学社区】

发布

暂无评论

创作场景

React Context

`Context`

什么是 `Context`

注意：

使用 `Context`

在使用之前要关注 `Context` 4 个 `api`

程序员海军

评论

创作场景

React Context

Context

什么是 Context

注意：

使用 Context

在使用之前要关注 Context 4 个 api

程序员海军

评论

`Context`

什么是 `Context`

使用 `Context`

在使用之前要关注 `Context` 4 个 `api`