react学习(十) React 中的 context

最新推荐文章于 2024-04-15 21:39:12 发布

weixin_41364787

最新推荐文章于 2024-04-15 21:39:12 发布

阅读量255

点赞数

分类专栏：与前端沾边文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_41364787/article/details/125213151

版权

React的Context API允许在组件树中全局共享数据，避免层层传递props。本文通过一个颜色切换的实例，详细讲解了Context的使用、创建及在mount和update阶段的处理方法，帮助理解其工作机制，并探讨了在有多个共享逻辑时如何组织和导出Context。

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

在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。

如果在你的项目中使用主题，基本是每个组件都需要；或者你在项目中使用多语言，也是每个组件都需要支持，这都是典型的可以通过 context 操作的例子

使用示例

我们实现一个多个组件，共享同一个颜色的示例，通过按钮点击切换颜色，如下：

我们有五个部分，外层的 pannel 组件，header 组件，title 组件，main 组件还有 content 组件。我们在随便一层组件中执行 color 切换函数，因为 setColor 方法已经通过 context 传递进去了。样式很简单，代码如下：

// src/index.js
import React from "react";
import ReactDOM from "react-dom";

// 创建上下文对象
const ColorContext = React.createContext()

const style = {
  margin: '5px',
  padding: '5px'
}
// 我们使用不同的方式创建组件

function Title() {
  return (
     // 函数组件使用方式，children 是一个函数
    <ColorContext.Consumer>
      {
        (contextValue) => {
          return <div style={
  {border: `5px solid ${contextValue.color}`}}>title</div>
        }
      }
    </ColorContext.Consumer>
  )
}


class Header extends React.Component {
  // 类组件绑定静态方法，默认给实例绑定 context 属性
  static contextType = ColorContext
  render() {
    // 也可以使用 comsumer 组件
    return (
      <div style={
  {border: `5px solid ${this.context.color}`}}>header <Title /&