Context小结

1、Context应用场景

• 非父子组件数据的共享：

  在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。

  但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。

  如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。

• 但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的：

  React提供了一个API：Context；

  Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；

  Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言；

2、Context讲解

Providr：生产者（提供共享数据）

Consumer：消费者（拿到生产者提供的数据源）

3、Context实践（函数组件、类组件）

父组件

import React, { Component, createContext } from 'react';
import Son from './Son';

// 设置默认值
export const { Provider, Consumer } = createContext({
  name: '哈哈哈',
  age: 18
});

export default class Parent extends Component {
  this.state = {
    name: 'HHH',
    age: 80
  }

  render() {
    return (
      <Provider value={this.state}>
        <Son />
      </Provider>
    );
  }
}

子组件

import React, { Component } from 'react';
import Grandson from './Grandson';

export default class Parent extends Component {

  render() {
    return (
      <div>
        <Grandson />
      </div>
    );
  }
}

孙子组件

import React, { Component } from 'react';
import { Consumer } from './Parent';

export default class Grandson extends Component {

  render() {
    return (
      <div>
        <Consumer>
          {
            value => <p>{value.name}</p>
          }
        </Consumer>
      </div>
    );
  }
}