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"