React学习day20——Fragment、Context

Fragment

使用

作用：可以不用必须有一个真实的DOM根标签了

可以加key值例如：

 <Fragment key={
   6}>
               <input type="text"/>
               <input type="text"/>
           </Fragment>

Context

一种组件间通信方式，常用于祖组件与后代组件间通信（祖孙，祖祖孙关系）
使用:
（1）创建Context容器对象：

const XxContext = React.createContext()

(2)渲染子组件时，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据：

  <xxxContext.Povider  value={
   数据}>子组件</xxxContext.Povider>

(3)后代组件读取数据：
//第一种方式：仅适用于类组件

  static contextType = xxxContext //声明接收context
  this.context //读取context中的value数据

//第二种方式：函数组件与类组件都可以