React框架-Context(上下文)

---

前言

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

---

一、Context的作用

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
作用：用于在React组件树中自上而下地传递数据

---

二、使用Context

1、React.createContext

创建一个 Context 对象。

const ThemeContext = React.createContext()

2、Context.Provider

生产者,用于生产共享数据的地方, 在value中放置需要共享的数据

<ThemeContext.Provider value={
   theme}>
						{
   /*<button onClick= {this.changeTheme.bind(this)}>改变主题色</button>*/}
	<div className="box1">
		{
   this.createNavLinks()}
	</div>
	<div className="box2">
		<Switch>
			{
   this.createRoutes()}
			<Redirect from="/*" to="/"/</