Context 通過組件樹提供了一個傳遞數(shù)據(jù)的方法巩趁，從而避免了在每一個層級手動的傳遞 props 屬性虚婿。
在一個典型的 React 應(yīng)用中，數(shù)據(jù)是通過 props 屬性由上向下（由父及子）的進(jìn)行傳遞的陵像，但這對于某些類型的屬性而言是極其繁瑣的（例如：地區(qū)偏好呀伙，UI主題），這是應(yīng)用程序中許多組件都所需要的瞬沦。 Context 提供了一種在組件之間共享此類值的方式太伊，而不必通過組件樹的每個層級顯式地傳遞 props 。
老版本的context API
import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
const Topic = (props) => {
return (
<div>
<Comment />
</div>
)
}
const Comment = (props, context) => {
return (
<div>{ context.color }</div>
)
}
Comment.contextTypes = {
color: PropTypes.string
}
class App extends Component {
getChildContext() {
return { color: "red" };
}
render() {
return (
<div className="App">
<Topic />
</div>
);
}
}
App.childContextTypes = {
color: PropTypes.string
}
export default App;
新版本16.3 context
import React, { Component } from 'react';
import './App.css';
// 第一步逛钻，創(chuàng)建 context
const myContext = React.createContext()
// 第二步僚焦，創(chuàng)建 Provider Component
class MyProvider extends Component {
state = {
name: "rails365",
age: 27
}
render() {
return (
<myContext.Provider value={{ state: this.state }}>
{ this.props.children }
</myContext.Provider>
)
}
}
const Family = (props) => {
return (
<div>
<h1>Family</h1>
<Person />
</div>
)
}
class Person extends Component {
render() {
return (
<div>
<h1>Person</h1>
<myContext.Consumer>
{ ({ state }) => <p>My age is { state.age }</p> }
</myContext.Consumer>
</div>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<p>Hello App</p>
<MyProvider>
<Family />
</MyProvider>
</div>
);
}
}
export default App;
API
React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);
創(chuàng)建一對 { Provider, Consumer }。當(dāng) React 渲染 context 組件 Consumer 時曙痘，它將從組件樹的上層中最接近的匹配的 Provider 讀取當(dāng)前的 context 值芳悲。
如果上層的組件樹沒有一個匹配的 Provider，而此時你需要渲染一個 Consumer 組件屡江，那么你可以用到 defaultValue 芭概。這有助于在不封裝它們的情況下對組件進(jìn)行測試。
Provider
<Provider value={/* some value */}>
React 組件允許 Consumers 訂閱 context 的改變惩嘉。
接收一個 value 屬性傳遞給 Provider 的后代 Consumers罢洲。一個 Provider 可以聯(lián)系到多個 Consumers。Providers 可以被嵌套以覆蓋組件樹內(nèi)更深層次的值文黎。
Consumer
<Consumer>
{value => /* render something based on the context value */}
</Consumer>
一個可以訂閱 context 變化的 React 組件惹苗。
接收一個 函數(shù)作為子節(jié)點(diǎn). 函數(shù)接收當(dāng)前 context 的值并返回一個 React 節(jié)點(diǎn)。傳遞給函數(shù)的 value 將等于組件樹中上層 context 的最近的 Provider 的 value 屬性耸峭。如果 context 沒有 Provider 桩蓉，那么 value 參數(shù)將等于被傳遞給 createContext() 的 defaultValue 。
