简介

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
在典型的React应用程序中,数据通过props自上而下传递(父对象),但这对于应用程序中许多组件所需的某些类型的props(例如区域设置首选项,UI主题)来说可能很麻烦。 Context提供了一种在组件之间共享这些值的方法,而无需通过树的每个级别显式传递prop。
手动一级级传递props:
使用Context,通过中间元素避免传递props:
上下文主要用于一些数据需要被不同层级的组件访问。小心使用,因为它会增加组件复用的难度。

API

React.createContext
创建一个Context对象。当React渲染一个组件时,订阅者会从最近的Provider读取到当前的context。
Context.Provider
每个Context对象都附带一个Provider React组件,允许使用组件来订阅上下文更改。
Class.contextType
Context.Consumer
一个订阅上下文变更的React组件,允许使用函数组件的形式订阅。
需要一个函数作为子元素,这个函数接收当前的context,返回一个React结点。

Examples

badge