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

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

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（生产者）

<GlobalContext.Provider 
  value={{
    background: 'green', 
    color: 'white',
    content:this.state.content,
    methodA:this.changeStateByChildren
  }}
>
 
</GlobalContext.Provider>  
注意：传入的value为根context对象的值，如果是动态的，使用状态管理

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

<GlobalContext.Consumer>
        {
          context => {
            return (
              <div>
              <h1 style={{background: context.background, color: context.color}}>
                {context.content}
              </h1>
              <Input methodA = {context.methodA} value={context.content}></Input>
              </div>
            )
          }
        }
</GlobalContext.Consumer>
注意：GlobalContext.Consumer内必须是回调函数，改变context，通过context方法改变根组件状态

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

context优缺点：

优点：跨组件访问数据

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

context github地址:持续更新
--------------------- 
作者：qdmoment 
来源：CSDN 
原文：https://blog.csdn.net/qdmoment/article/details/82626525 
版权声明：本文为博主原创文章，转载请附上博文链接！