React中Provider组件详解

使用场景
1.A(顶级组件）-》B组件（子组件）-》C组件（孙子组件）
2.A(顶级组件）-》B组件（子组件）、C组件（孙子组件）…很多组件（每个组件都需要传props)
A组件传递数据给C组件实现方式有很多种
1.通过props层层传递到C组件
2.通过全局对象
使用Provider可以解决数据层层传递和每个组件都要传props的问题；

三个嵌套组件：A B C
场景：组件 C 想要取组件A 的属性，一般做法通过A–B–C一层一层传递下来
缺点：使用麻烦，容易出错，中途出错，后续都错

class A extends React.Component {
  state = { name: 'A'  }
  render(){
    return (
    <div>
        <B name={this.name.name}>
    </div>)
  }
}

// B组件
class Father extends React.Component {
  render(){
    return (
    <div>
        <C age={this.props.name}> 
    </div>)
  } 
}

// C组件
class C extends React.Component {
  render(){
     return (
     <div>
        {this.props.name}
      </div>
  } 
}

简单实现一个Provider ==》简化属性传递
利用react的context实现一个provider，任意后代组件可以直接通过context取到顶级组件的属性

// A组件
import Provider from './provider'
import B from './B';

 <Provider info={{name:'max', age: 13}}>
    <B/>
 </Provider>

// 简单的Provider组件
import React, { Component,Children } from 'react';
import PropTypes from  "prop-types" 
import A from './A'

export default class Provider extends React.Component {
  static  childContextTypes = {
    store: PropTypes.object.isRequired
  };
  constructor(props){
      super(props)
      this.store = {...props}
  }

  getChildContext(){
    return {store:this.store}
  }

  render(){
      return (
      <div>
          {this.props.children}
      </div>)
  }  
}

 // C组件
import React, { Component } from 'react';
import PropTypes from  "prop-types"

export default class C extends React.Component {
  // 必须要申明，react认为全局变量不好
  static  contextTypes = {
    store:PropTypes.object.isRequired
  };
  render(){
      return (
      <div>
          <h1>{this.context.store.info.age}</h1>  // 这里直接获取provider提供的属性值
      </div>)
  }
}