react上下文context怎样使用看这篇这够了

react上下文context是一个很有趣的api，一方面react官网不推荐使用，另一方面许多官方依赖在使用

目前使用context的依赖包：

react-redux、mobx-react、react-router、拖拽组件react-dnd

context分为新版后旧版，这里都介绍下

————————————————————————————————————————————————————————

context旧版使用步骤：

1，根组件定义静态属性：

// 声明Context对象属性
  static childContextTypes = {
    propA: PropTypes.string,
    visibleA:PropTypes.string,
    methodA: PropTypes.func
  }

2，返回context对象，约定方法名

// 返回Context对象，方法名是约定好的
  getChildContext () {
    return {
      propA: this.state.propA,
      methodA: this.changeStateByChildren
    }
  }

注意：如果context的值是动态的采用state管理，更改某个context值时，改变根组件的state

3，组件调用context先定义静态属性，根据约定好的参数类型，否则会出现未定义

static contextTypes = {
	propA: PropTypes.string,
    methodA:PropTypes.func
}

4，下文改变context的值，通过context的函数去改变根组件的状态即可

———————————————————————————————————————————————————————

新版context的使用步骤和方法：更好的解释了生产者和消费者模式

1，先定义全局context对象

import React from 'react'

const GlobalContext = React.createContext()
export default GlobalContext

2，根组件引入GlobalContext，并使用GlobalContext.Provider（生产者）

注意：传入的value为根context对象的值，如果是动态的，使用状态管理

3，组件引入GlobalContext并调用context，使用GlobalContext.Consumer（消费者）

        {
          context => {
            return (
              

              

                {context.content}
              
              
              
            )
          }
        }

注意：GlobalContext.Consumer内必须是回调函数，改变context，通过context方法改变根组件状态

——————————————————————————————————————————————————————

context优缺点：

优点：跨组件访问数据

缺点：react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时，不会引起下级组件更新

context github地址:持续更新