1、Context應用場景
-
非父子組件數(shù)據(jù)的共享：
在開發(fā)中桑谍，比較常見的數(shù)據(jù)傳遞方式是通過props屬性自上而下（由父到子）進行傳遞。
但是對于有一些場景：比如一些數(shù)據(jù)需要在多個組件中進行共享（地區(qū)偏好祸挪、UI主題锣披、用戶登錄狀態(tài)、用戶信息等）贿条。
如果我們在頂層的App中定義這些信息雹仿，之后一層層傳遞下去，那么對于一些中間層不需要數(shù)據(jù)的組件來說整以，是一種冗余的操作胧辽。
-
但是，如果層級更多的話公黑，一層層傳遞是非常麻煩邑商，并且代碼是非常冗余的：
React提供了一個API：Context；
Context 提供了一種在組件之間共享此類值的方式凡蚜，而不必顯式地通過組件樹的逐層傳遞 props人断；
Context 設計目的是為了共享那些對于一個組件樹而言是“全局”的數(shù)據(jù)，例如當前認證的用戶朝蜘、主題或首選語言恶迈；
2、Context講解
Providr：生產者（提供共享數(shù)據(jù)）
Consumer：消費者（拿到生產者提供的數(shù)據(jù)源）
3谱醇、Context實踐（函數(shù)組件暇仲、類組件）
父組件
import React, { Component, createContext } from 'react';
import Son from './Son';
// 設置默認值
export const { Provider, Consumer } = createContext({
name: '哈哈哈',
age: 18
});
export default class Parent extends Component {
this.state = {
name: 'HHH',
age: 80
}
render() {
return (
<Provider value={this.state}>
<Son />
</Provider>
);
}
}
子組件
import React, { Component } from 'react';
import Grandson from './Grandson';
export default class Parent extends Component {
render() {
return (
<div>
<Grandson />
</div>
);
}
}
孫子組件
import React, { Component } from 'react';
import { Consumer } from './Parent';
export default class Grandson extends Component {
render() {
return (
<div>
<Consumer>
{
value => <p>{value.name}</p>
}
</Consumer>
</div>
);
}
}
