React19组件通信之上下文（context）

  • 上下文context有两个角色
    • Provider 数据提供
    • Consumer 数据读取
  • 使用context可以避免通过中间元素传递props，context的设计目的是为了共享对于一个组件树而言是“全局”的数据
  • 不使用context的情况下的代码：
        
        
注：不使用context的话，需要层层组件props传递数据，中间组件传递props的方式是在引用子组件时标签上写{...props}
 
  • 使用context上下文：
    
 
注：《1》在最外层的组件，用Provider包裹住组件，value属性后面把数据提供下去。这是固定写法。
       《2》在下层需要用到该数据的组件在render渲染函数中用Consumer标签包裹jsx语法写的代码：
*Consumer标签里面是有一个箭头函数，参数就是最外层Provider注入的数据
 
posted @ 2020-01-05 18:25  Godfi  阅读(307)  评论(0)  编辑  收藏  举报