React Context API 入门

一、Context API入门

react版本16.13.1

1.context的作用

react中通过属性自上而下传递数据，但如果需要穿透多层组件传递数据，则需要在每层的组件都传递props属性，非常繁琐。

context解决的就是穿透中间组件传递数据。

• 使用props传递数据

  

 

• 使用context传递数据

  

使用context可以在最顶层（数据获取位置）创建Provider，就可以在这个组件之后的所有子组件中随时调用context中的数据，同时当context中的数据发生改变时，子组件中的数据也同时发生变化，并重新渲染。

2.context的API及使用逻辑

过程：

1. 通过createContext创建Context

2. 使用Context.Provider组件发布数据（通过给Context.Provider传递value属性）

3. Context.Provider的所有后代组件，都可以通过Context.Consumer消费数据

逻辑：

1.创建单独的context组件，然后在使用context时导入使用，解决