非父子组件通信--Context

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
    }
  <