[TOC]
> [聊一聊我對 React Context 的理解以及應用 - 簡書](https://www.jianshu.com/p/eba2b76b290b)
## :-: Context
**React中的上下文特點**
* 當某個組件創建了上下文后,上下文中的數據,會被所有后代組件共享。
* 如果某個組件依賴了上下文,會導致該組件不再純粹。(外部數據僅來源于屬性props)
* 一般情況下,用于第三方組件(通用組件)
### :-: 舊版的API
- 只有類組件才可以創建上下文
**父級(創建)**
```
import PropTypes from 'prop-types';
static childCaontextTypes = {a:PropTypes.string}
getChildContext(){ return {a:this.state.a} }
```
**子級(使用)**
:-: --- 類組件
```
import PropTypes from 'prop-types';
static contextTypes = {a:PropTypes.string}
constructor(props,context){
super(props,context); // 將參數的上下文交給父類處理
console.log(this.context);
}
```
:-: --- 函數組件
```
Child.contextTypes = {a:PropTypes.string}
function Child(props,context){ console.log(this.context.a); }
```
### :-: 新版的API
**上下文是一個獨立于組件的對象,該對象通過React.createContext(默認值)創建,返回的是一個包含兩個屬性的對象。 {Provider,Consumer}**
* Provider屬性:生產者,一個組件,該組件會創建一個上下文。該組件有一個value屬性,通過該屬性,可以為其數據賦值。
* Consumer屬性:消費者
**在類組件中,直接使用this.context獲取上下文數據。**
* 必須有靜態屬性contextType,應賦值為創建的上下文對象。
**在函數組件中,需要使用Consumer來獲取上下文數據。**
* Consumer是一個組件
* 它的子節點,是一個函數(它的props.children需要傳遞一個函數)
```
const __ctx = React.createContext({a:123,b:'abc'}); // 創建上下文對象,參數為默認值
```
**父級(創建)**
```
render(){
const {Provider} = __ctx;
return (
<Provider value={{b:'可以改變元數據'}}>
···
</Provider>
)
}
```
**子級(使用)**
:-: 類組件
```
static contextType = __ctx;
render(){
return <p>{this.context.b}</p>
}
```
:-: 函數組件
```
const {Consumer} = __ctx;
function Child(props){
return <>
<Consumer>
{ value => { return <span>{value.b}</span> } }
</Consumer>
</>
}
```
**注意細節:** 上下文提供者(Context.Provider)中的value屬性發生變化,會導致該上下文提供的所有后代元素全部重新渲染,無論該子元素是否有優化。(強制更新)
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request