2021-01-27 React高级API-Context

最新推荐文章于 2024-04-18 04:03:26 发布

xumaozeng

最新推荐文章于 2024-04-18 04:03:26 发布

阅读量310

点赞数 1

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/xumaozeng/article/details/113245122

版权

React的Context API允许在组件树中跨层级传递值，降低了组件间的耦合性。创建Context对象，通过Provider传递value，组件可以通过contextType、useContext或Consumer来消费这些值。使用Context可以简化组件间尤其是跨层级的通信，例如用于共享应用的主题色。在类组件中，可通过contextType订阅，而在函数组件中，可以使用useContext hook。

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

2021-01-27 React高级API-Context

组件化优点

增强代码重用性，提高开发效率
简化调试步骤，提升整个项目的可维护性
便于协同开发
注意点：降低耦合性

组件跨层级通信-Context
React应用中，大部分数据是通过props属性自上而下(由父及子)进行传递的，遇到复杂的嵌套组件关系时，可以使用Context实现祖代组件想后代组件跨层级传值，类似于Vue中的provide&inject就是来源于Context

Context API
React.createContext：创建一个Context对象，当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中里自身最近的那个匹配的Provider中读取到当前的context值

Context.Provider：Provider接收一个value属性，传递给消费组件，允许消费组件订阅context的变化。一个Provider可以和多个消费组件有对应关系。多个Provider也可以嵌套使用，里层的会覆盖外层的数据

当Provider的value值发生变化时，它内部的所有消费组件都会重新渲染。Provider及其内部consumer组件不受制于shouldComponentUpdate函数，因此当consumer组件在其祖先组件退出更新的情况下也能更新

Class.contextType：挂载在class上的contextType属性会被重新赋值为一个由React.createContext()创建的Context对象。这能让你使用this.context来消费最近的Context上的那个值。你可以在任何生命周期中访问到它，包括render函数中

你只能通过该API订阅单一context

Context.Consumer：这里，React组件也可以订阅到context变更。这能让你在函数组件中完成订阅context。这个函数接收当前的context值，返回一个React节点。传递给函数的value值等同于往上组件树离这个context最近的Provider提供的value值。如果没有对应的Provider，value参数等同于传递给createContext()的defaultValue

useContext：接收一个context对象(React.createContext的返回值)并返回该context的当前值。当前的context值由上层组件中距离当前组件最近的<MyContext.Provider>的value prop决定。只能用在function组件中

如何使用Context：三步走
step1：创建一个context对象
step2：创建Provider，传递value
step3：子组件消费value，有三种途径：contextType、useContext、Consumer

区别：
contextType只能用在类组件，只能订阅单一的context来源
useContext只能用在函数组件或自定义hook中，可以读取多个
Consumer不限制函数或者类组件

例子：使用Context共享主题色
创建Context => 获取Provider和Consumer =>Provider提供值 =>Consumer消费值

Context.js

import React from "react";

// 创建Context对象,React.createContext
export const ThemeContext = React.createContext({
    themeColor: "pink" });

export const UserContext = React.createContext();

ContextPage.js

import React, {
    Component } from "react";
import ContextTypePage from "./ContextTypePage";
import {
    ThemeContext, UserContext } from "./Context";
import ConsumerPage from "./ConsumerPage"