>ContextAPI其實是一個存在了很久的特性，但是舊的API存在很多問題因此使用度不高。React16.3之后官方更新了ContextApi。
之前我們使用傳遞props的方法在組件之間傳值，但是在組件層級多了之后會導致要在每一層都加上要傳遞的props，維護起來很麻煩，一旦新增或者減少，所有傳遞了該props的組件都要調整，增加了開發的工作量。為了解決這個問題，React引入了ContextApi
<br />
### Context包含的內容
- React.CreateContext()方法
- 該方法接受一個默認值作為參數，默認值可以為Number，String，Object,Boolean，甚至可以接受一個函數作為參數。
- Context.Provider 上下文支持者組件
- 每一個Context都包含一個Provider組件，該組件接受一個名為value的props，該值將會取代CreateContext中的默認值。一旦使用該組件，就算沒有傳遞value或者value為undefined、NULL，默認值也將不起作用。
- Context.Consumer 上下文消費者組件
- 每一個Context在提供Provider組件的同時也會提供一個Consumer組件，作為該Context的使用者。
- Class.contextType
- 所有的類組件都會有一個contextType屬性，通過這個屬性我們可以把我們創建的context賦值給類組件，并在組件中通過使用this.context來獲取當前context的值。
**Consumer可以脫離Provider的情況下單獨使用，在沒有Provider組件時，將會使用默認值，如果存在多個Provider組件，將會使用最近的Provider組件提供的value作為自己的值**
<br />
### context最基本的應用
```javascript
import React, { Component } from 'react';
const firstContext = React.createContext('一個使用了context的應用');
const ContextComp = () => {
return (
<firstContext.Consumer>
{
contextValue => <h1>{contextValue}</h1>
}
</firstContext.Consumer>
);
};
const ContextFather = () => {
return <ContextComp />;
};
class ContextTest extends Component {
render() {
return <ContextFather />
}
}
export default ContextTest;
```
<br />
### 使用Context.Provider改變context的值
```javascript
import React, { Component } from 'react';
const firstContext = React.createContext('一個使用了context的應用');
const ContextComp = () => {
return (
<firstContext.Consumer>
{
contextValue => <h1>{contextValue}</h1>
}
</firstContext.Consumer>
);
};
const ContextFather = () => {
return <ContextComp />;
};
class ContextTest extends Component {
render() {
return (
<firstContext.Provider value={123}>
<ComtextFather />
</firstContext.Provider>
)
}
}
export default ContextTest;
```
<br />
### 動態設置context值的實現方法
```javascript
import React, { Component } from 'react';
const firstContext = React.createContext('一個使用了context的應用');
const ContextComp = () => {
return (
<firstContext.Consumer>
{
contextValue => <h1>{contextValue}</h1>
}
</firstContext.Consumer>
);
};
const ContextFather = () => {
return <ContextComp /> ;
};
class ContextTest extends Component {
state = {
title: 'context測試標題',
}
render() {
return (
<firstContext.Provider value={this.state.title}>
<ContextFather />
</firstContext.Provider>
);
}
}
export default ContextTest;
```
<br />
### 使用對象作為context的值
```javascript
import React, { Component } from 'react';
const firstContext = React.createContext({ title: '這是一個使用了context的組件' });
const ContextComp = () => {
return (
<firstContext.Consumer>
{
contextValue => <h1>{contextValue.title}</h1>
}
</firstContext.Consumer>
);
};
const ContextFather = () => {
return <ContextComp /> ;
};
class ContextTest extends Component {
state = {
title: 'context測試標題',
}
render() {
const { title } = this.state;
return (
<firstContext.Provider value={{ title }}>
<ContextFather />
</firstContext.Provider>
);
}
}
export default ContextTest;
```
<br />
### 引用外部的Context
在使用中我們可以將Context寫入單獨的文件，再通過export、import的方式引入Context
在contestTest.jsx中暴露了自定義Context的Provider，Consumer
```javascript
import React from 'react';
export const { Consumer, Provider } = React.createContext({ title: '引用外部的context' });
```
然后在context.jsx中引入{ Consumer, Provider }
```javascript
import React, { Component } from 'react';
import { Provider, Consumer } from './contextTest';
const ContextComp = () => {
return (
<Consumer>
{
contextValue => <h1>{contextValue}</h1>
}
</Consumer>
);
};
const ContextFather = () => {
return <ContextComp />
};
class ContextTest extends Component {
render() {
return (
<Provider value={{ title: '修改引用的外部title' }}
<ContextFather />
</Provider>
);
}
}
export default ContextTest;
```
<br />
### 需要注意的點
有人說Context是React中的Redux，在我看來并不是這樣。Context有他自己擅長的地方，也有著他的局限性。
1. Context適用于多層級組件之間只用相同的props的情況，一旦組件之間使用的數據結構有一點點變化，我們就需要寫一個新的Context來滿足組件的使用，如果使用的context是通過引用的方式使用的，那么就需要新寫一個context文件，而如果使用props傳遞的話我們可以選擇性的傳遞部分props或自己拼裝新的props。
2. Context的Provier和Consumer是一一對應的，我們需要多少個不同數據結構的Context就需要創建多少個Context，這對于維護來說是不利的。
3. 當Provider傳遞的value發生變動時，Consumer組件就會更新，且更新不受到shouldComponentUpdate的影響，也就是說即使父組件在shouldComponentUpdate中設定了不更新，Consumer組件也會更新。
4. 其變動判斷通過Object.is來判斷,會導致不論使用了該Context的組件是否用到了Context中的變動的數據，組件都會更新。
5. Context無法存儲數據，其數據的讀取全部依靠于Provider組件的value值或者創建時的默認值，因此并不能像Redux那樣將數據存儲起來，再在頁面中引用。建議將Context與State結合起來使用，將Context使用的變量維護在 State當中。當然你可以也將數據維護在Reudx中，這樣就沒有必要再使用Context了。
<br />
>[info]總的來說，context是React官方借鑒Redux理念的一個實踐API，與Redux相比起來，在維護輕量級數據的問題上引用Context比引用Redux要輕量一些。但是Context在使用上也存在著自己的局限性，在實際項目中，復雜、重量級的數據還是應放在Redux中去維護，輕量的數據可以放在Context中去維護。
