【React系列】非父子组件通信—Context.Provider共享数据、events库事件总线通信
本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)
一. Context使用
1.1. Context应用场景
非父子组件数据的共享：
- 在开发中，比较常见的数据传递方式是通过
props属性自上而下（由父到子）进行传递。 - 但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。
- 如果我们在顶层的
App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。
我们来看一个例子：
import React, { Component } from 'react';
function ProfileHeader(props) {
return (
<div>
<h2>用户昵称: {props.nickname}</h2>
<h2>用户等级: {props.level}</h2>
</div>
)
}
class Profile extends Component {
render() {
return (
<div>
<ProfileHeader nickname={this.props.nickname} level={this.props.level} />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
<li>设置5</li>
</ul>
</div>
)
}
}
export default class App extends Component {
constructor() {
super();
this.state = {
nickname: "coderwhy",
level: 99
}
}
render() {
const { nickname, level } = this.state;
return (
<div>
<Profile nickname={nickname} level={level} />
<h2>其他内容</h2>
</div>
)
}
}
我这边顺便补充一个小的知识点：Spread Attributes
- https://zh-hans.reactjs.org/docs/jsx-in-depth.html
下面两种写法是等价的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
那么我们上面的Profile的传递代码可以修改为如下代码：
<ProfileHeader {...this.props}/>
但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的：
- React提供了一个API：
Context； Context提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递props；Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言；
1.2. Context相关的API
React.createContext
const MyContext = React.createContext(defaultValue);
创建一个需要共享的Context对象：
- 如果一个组件订阅了
Context，那么这个组件会从离自身最近的那个匹配的Provider中读取到当前的context值； defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值
Context.Provider
<MyContext.Provider value={/* 某个值 */}>
...
</MyContext.Provider>
每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
Provider接收一个value属性，传递给消费组件；- 一个
Provider可以和多个消费组件有对应关系；
多个Provider也可以嵌套使用，里层的会覆盖外层的数据；
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；
Class.contextType
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* 基于 MyContext 组件的值进行渲染 */
}
}
MyClass.contextType = MyContext;
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
- 这能让你使用
this.context来消费最近Context上的那个值； - 你可以在任何生命周期中访问到它，包括
render函数中；
Context.Consumer
<MyContext.Consumer>
{value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
这里，React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。
- 这里需要 函数作为子元素（function as child）这种做法；
- 这个函数接收当前的
context值，返回一个 React 节点；
1.3. Context使用过程
我们先按照前面三个步骤来使用一个Context：
import React, { Component } from 'react';
const UserContext = React.createContext({ nickname: "默认", level: -1 })
class ProfileHeader extends Component {
render() {
return (
<div>
<h2>用户昵称: {this.context.nickname}</h2>
<h2>用户等级: {this.context.level}</h2>
</div>
)
}
}
ProfileHeader.contextType = UserContext;
class Profile extends Component {
render() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
<li>设置5</li>
</ul>
</div>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<UserContext.Provider value={{ nickname: "why", level: 99 }}>
<Profile />
</UserContext.Provider>
<h2>其他内容</h2>
</div>
)
}
}
- 我们就会发现，这个过程中
Profile是不需要有任何的数据传递的。
什么时候使用默认值 defaultValue 呢？ 如果出现了如下代码：
<Profile />
<UserContext.Provider value={{ nickname: "why", level: 99 }}>
</UserContext.Provider>
UserContext.Provider的子组件；
什么时候使用 Context.Consumer 呢？
- 当使用
value的组件是一个函数式组件时； - 当组件中需要使用多个
Context时；
演练一：
function ProfileHeader(props) {
return (
<div>
<UserContext.Consumer>
{value => {
return (
<div>
<h2>用户昵称: {value.nickname}</h2>
<h2>用户等级: {value.level}</h2>
</div>
)
}}
</UserContext.Consumer>
</div>
)
}
演练二：当使用value的组件是一个函数式组件时；
- 创建一个新的
Context
const ThemeContext = React.createContext({ color: "black" });
Provider的嵌套
<UserContext.Provider value={{ nickname: "why", level: 99 }}>
<ThemeContext.Provider value={{color: "red"}}>
<Profile />
</ThemeContext.Provider>
</UserContext.Provider>
- 使用
Consumer的嵌套
<UserContext.Consumer>
{value => {
return (
<ThemeContext.Consumer>
{
theme => (
<div>
<h2 style={theme}>用户昵称: {value.nickname}</h2>
<h2 style={theme}>用户等级: {value.level}</h2>
</div>
)
}
</ThemeContext.Consumer>
)
}}
</UserContext.Consumer>
更多用法可以参考官网：https://zh-hans.reactjs.org/docs/context.html
二. 事件总线
2.1. 事件总线的概述
前面通过Context主要实现的是数据的共享，但是在开发中如果有跨组件之间的事件传递，应该如何操作呢？
- 在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus），来完成操作；
- 在React中，我们可以依赖一个使用较多的库
events来完成对应的操作；
我们可以通过npm或者yarn来安装events：
yarn add events;
events常用的API：
- 创建
EventEmitter对象：eventBus对象； - 发出事件：
eventBus.emit("事件名称", 参数列表); - 监听事件：
eventBus.addListener("事件名称", 监听函数)； - 移除事件：
eventBus.removeListener("事件名称", 监听函数)；
2.2. 案例演练
我们通过一个案例来进行演练：
import React, { Component } from 'react';
import { EventEmitter } from "events";
const eventBus = new EventEmitter();
class ProfileHeader extends Component {
render() {
return (
<div>
<button onClick={e => this.btnClick()}>按钮</button>
</div>
)
}
btnClick() {
eventBus.emit("headerClick", "why", 18);
}
}
class Profile extends Component {
render() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
<li>设置5</li>
</ul>
</div>
)
}
}
export default class App extends Component {
componentDidMount() {
eventBus.addListener("headerClick", this.headerClick)
}
headerClick(name, age) {
console.log(name, age);
}
componentWillUnmount() {
eventBus.removeListener("headerClick", this.headerClick);
}
render() {
return (
<div>
<Profile/>
<h2>其他内容</h2>
</div>
)
}
}