React Context是什么

前言

一、React Context是什么？

简介What

Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的功能。
某些全局属性，通过父子props传递太过繁琐，Context提供了一种组件之间共享此类值的方式，而不必显式的通过组件树逐层传递props，共享那些对于一个组件树而言是全局的数据，例如当前认证的用户、主题或者首选语言等。

使用场景

• Context应用场景在于很多不同层级的组件访问同样的数据，这样也使得组件的复用性变差。
• 如果你只是想避免层层传递一些属性，组件组合有时候是一个比Context更好的方案，也就是直接传递组件
• 所以一个技术方案的选定需要针对不同的场景具体分析，采取合适的方案。

How

// ①创建
const ThemeContext = React.createContext('xxx')

// ②注入---提供者 在入口或者你想要注入的父类中，且可以嵌套，里层覆盖外层
return (
  <ThemeContext.Provider value="yyy">
  {children}
  <ThemeContext.Provider>
)

// ③使用---消费者 需要使用共享数据的子类中
// 方式
static contextType = ThemeContext