Context

在組件樹(shù)進(jìn)行數(shù)據(jù)傳遞全局?jǐn)?shù)據(jù)

何時(shí)使用Context

• 共享哪些對(duì)于一個(gè)組件樹(shù)而言是全局的數(shù)據(jù)
• 使用Context，避免通過(guò)中間元素傳遞props

使用Context的注意

如果只是想要避免層層傳遞一些屬性，組件組合是更好的方案

一種無(wú)需context的解決方案是將組件自身直接傳遞下去，而不是傳遞過(guò)多的props

Context是將數(shù)據(jù)向組件樹(shù)下的所有組件進(jìn)行廣播，所有組件都能訪問(wèn)到這些數(shù)據(jù)，也能訪問(wèn)到后續(xù)的數(shù)據(jù)更新

API

React.createContext

const MyContext = React.createContext(defaultValue);

只有當(dāng)所處的組件樹(shù)中沒(méi)有匹配搭配Provider時(shí)，defaultValue才會(huì)生效。

Context.Provider

<MyContext.Provider value={/* 某個(gè)值 */}>

• 多個(gè)Provider可以嵌套使用，里面的會(huì)覆蓋外面的值
• 當(dāng)Provider的value值發(fā)生變化時(shí)，它內(nèi)部的所有消費(fèi)組件都會(huì)重新渲染

Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在組件掛載完成后，使用 MyContext 組件的值來(lái)執(zhí)行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 組件的值進(jìn)行渲染 */
  }
}
MyClass.contextType = MyContext;

//新語(yǔ)法
class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于這個(gè)值進(jìn)行渲染工作 */
  }
}

• 使用this.context來(lái)消費(fèi)最近Context上的那個(gè)值
• 可以在任何生命周期中訪問(wèn)到它，包括render()中

Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值進(jìn)行渲染*/}
</MyContext.Consumer>

在函數(shù)式組件中完成訂閱context

這個(gè)函數(shù)接收當(dāng)前的content值，返回一個(gè)react節(jié)點(diǎn)

Context.displayName

設(shè)置在DevTools中將顯示的內(nèi)容

動(dòng)態(tài)Context

• 在Provider內(nèi)部的組件，使用state中的值
• 外部的組件使用React.createContext時(shí)的默認(rèn)值

在嵌套組件中更新Context

通過(guò)context傳遞一個(gè)函數(shù)，使得consumers組件更新context

消費(fèi)多個(gè)Context

為了確保 context 快速進(jìn)行重渲染，React 需要使每一個(gè) consumers 組件的 context 在組件樹(shù)中成為一個(gè)單獨(dú)的節(jié)點(diǎn)。