前言
一、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