【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

下面两种写法是等价的：