React中的Context怎么用

zhouzhou 發布于2019-08-21 16:48 / 1997人閱讀

摘要：怎樣使用假設有個如下的結構上面的例子中，我們把手動的方式傳給了，這期間穿越了，而對本身沒有什么用。不建議使用絕大多數的應用程序是不需要使用的。如果項目對數據管理較為復雜，推薦使用類似于或這樣的狀態管理庫，而不要使用。

What is Context

今天在學習styled-components的Theming時，關于styled-components對主題的實現與管理上提到，主要應用到了react的context API，所以好好研讀了一下官方文檔，對該API做了如下記錄。

什么是Context

當我們使用React時，很容易的通過觀察組件的props來跟蹤組件間的數據流流向，這種跟蹤觀察方式也讓我們很容易的去理解組件。

而有的時候，我們不想讓一個props從最外層，通過組件一層一層的傳遞到目標組件上，這時就可以通過context來直接實現我們希望的操作。

怎樣使用Context

假設有個如下的結構：

class Button extends React.Component {
  render() {
    return (
      
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      
        {this.props.text} 
      
    );
  }
}

class MessageList extends React.Component {
  render() {
    const color = "purple";
    const children = this.props.messages.map((message) =>
      
    );
    return {children};
  }
}

上面的例子中，我們把color手動的方式傳給了Button，這期間穿越了Message，而對Message本身沒有什么用。如果用context的話，可以直接給到Button組件上，如下：

const PropTypes = require("prop-types");

class Button extends React.Component {
  render() {
    return (
      
    );
  }
}

Button.contextTypes = {
  color: PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      
        {this.props.text} 
      
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      
    );
    return {children};
  }
}

MessageList.childContextTypes = {
  color: PropTypes.string
};

通過給MessageList（Context宿主）添加childContextTypes和getChildContext，可以實現在該組件子結構下的所有組件（e.g. Button）直接通過定義contextTypes來獲取。

如果未定義contextTypes的話，context是一個空對象。

可獲取Context對象的勾子函數

一旦組件定義了contextTypes以后，以下的勾子中就會得到一個附加的參數——context對象：

constructor(props, context)

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

componentDidUpdate(prevProps, prevState, prevContext)

無狀態組件獲取Context方法

無狀態組件同樣可以通過給函數定義contextTypes屬性的方式，讓組件擁有獲取context的能力，例如：

const PropTypes = require("prop-types");

const Button = ({children}, context) =>
  ;

Button.contextTypes = {color: PropTypes.string};

Context的更新

不要更新Context！

React雖然有提供關于更新context的API，但不建議去使用。

如果想用的話，可以看下面的這個例子。
getChildContext方法會在state或props更新時被調用，可以通過局部狀態的更新進而來更新context。當context更新后，所有的子組件都能接到新值。

const PropTypes = require("prop-types");

class MediaQuery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {type:"desktop"};
  }

  getChildContext() {
    return {type: this.state.type};
  }

  componentDidMount() {
    const checkMediaQuery = () => {
      const type = window.matchMedia("(min-width: 1025px)").matches ? "desktop" : "mobile";
      if (type !== this.state.type) {
        this.setState({type});
      }
    };

    window.addEventListener("resize", checkMediaQuery);
    checkMediaQuery();
  }

  render() {
    return this.props.children;
  }
}

MediaQuery.childContextTypes = {
  type: PropTypes.string
};

這里有個問題是，如果宿主組件的context更新了，其下使用該context的子組件可能因為某個父組件的shouldComponentUpdate返回false而不做狀態更新。這就完全不符合通過使用context來控制組件狀態更新的初衷，所以證明使用context來管理組件狀態不太靠譜。
這里有篇博客關于介紹如何安全的使用context的。

不建議使用Context

絕大多數的應用程序是不需要使用context的。

如果你想要你的應用穩定，就不要使用它，這是一個實驗性的API，在未來的版本更新中很有可能會被棄掉。

context最好的使用場景是隱式的傳入登錄的用戶，當前的語言，或者主題信息。要不然所有這些可能就是全局變量，但是context讓你限定他們到一個多帶帶的React樹里。

如果項目對數據管理較為復雜，推薦使用類似于redux或mobX這樣的狀態管理庫，而不要使用context。

記錄的過程是一種成長，歡迎大家關注我的github。

云服務器 GPU云服務器 jsp中的換行怎么用怎么部署react項目 Context 用PHP中的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88737.html

React 328道最全面試題(持續更新)

摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

kumfo 2019-08-26 10:13 評論0 收藏0
高階組件 + New Context API = ?

摘要：但是老版的存在一個嚴重的問題子孫組件可能不更新。其中，某一時刻屬性發生變化導致組件觸發了一次渲染，但是由于組件是且并未用到屬性，所以的變化不會觸發及其子孫組件的更新，導致組件未能得到及時的更新。 1. 前言繼上次小試牛刀嘗到高價組件的甜頭之后，現已深陷其中無法自拔。。。那么這次又會帶來什么呢？今天，我們就來看看【高階組件】和【New Context API】能擦出什么火花！ 2. N...

Joyven 2019-08-23 12:21 評論0 收藏0
從Preact了解一個類React的框架是怎么實現的(三): 組件

摘要：組件渲染首先我們來了解組件返回的虛擬是怎么渲染為真實，來看一下的組件是如何構造的可能我們會想當然地認為組件的構造函數定義將會及其復雜，事實上恰恰相反，的組件定義代碼極少。前言　　首先歡迎大家關注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵。　　之前分享過幾篇關于React的文章: React技術內幕: k...

AlphaWatch 2019-08-21 17:16 評論0 收藏0
React中的“蟲洞”——Context

摘要：理論上，通過一層層傳遞下去當然是沒問題的。不過這也太麻煩啦，要是能在最外層和最里層之間開一個穿越空間的蟲洞就好了。使用看起來很高大上的使用起來卻異常簡單。就像中的全局變量，只有真正全局的東西才適合放在中。當我們寫React時，我們總是通過改變State和傳遞Prop對view進行控制，有時，也會遇到一點小麻煩。背景但是隨著我們的應用變的越來越復雜，組件嵌套也變的越來越深，有時甚至...

muddyway 2019-08-19 17:54 評論0 收藏0
React context 丟失問題

摘要：丟失問題文本是為了說清目前的機制是而不是我們以為的機制，并說明這兩者的區別。雖然明白了原理，但是問題并沒有解決。上下文注意這里是，需要執行接受回調函數，回調函數中的內容為實測可以成功拿到。 React context 丟失問題文本是為了說清react context目前的機制是owner context 而不是我們以為的parent context 機制，并說明這兩者的區別。...

Seay 2019-08-21 10:36 評論0 收藏0