国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React中的Context怎么用

zhouzhou / 2004人閱讀

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

What is Context

今天在學(xué)習(xí)styled-components的Theming時，關(guān)于styled-components對主題的實現(xiàn)與管理上提到，主要應(yīng)用到了react的context API，所以好好研讀了一下官方文檔，對該API做了如下記錄。

什么是Context

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

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

怎樣使用Context

假設(shè)有個如下的結(jié)構(gòu)：

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，可以實現(xiàn)在該組件子結(jié)構(gòu)下的所有組件（e.g. Button）直接通過定義contextTypes來獲取。

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

可獲取Context對象的勾子函數(shù)

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

constructor(props, context)

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

componentDidUpdate(prevProps, prevState, prevContext)

無狀態(tài)組件獲取Context方法

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

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

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

Button.contextTypes = {color: PropTypes.string};
Context的更新

不要更新Context！

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

如果想用的話，可以看下面的這個例子。
getChildContext方法會在state或props更新時被調(diào)用，可以通過局部狀態(tài)的更新進而來更新context。當(dāng)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而不做狀態(tài)更新。這就完全不符合通過使用context來控制組件狀態(tài)更新的初衷，所以證明使用context來管理組件狀態(tài)不太靠譜。
這里有篇博客關(guān)于介紹如何安全的使用context的。

不建議使用Context

絕大多數(shù)的應(yīng)用程序是不需要使用context的。

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

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

如果項目對數(shù)據(jù)管理較為復(fù)雜，推薦使用類似于redux或mobX這樣的狀態(tài)管理庫，而不要使用context。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88737.html

相關(guān)文章

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

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

    kumfo 評論0 收藏0

  • 高階組件 + New Context API = ?

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

    Joyven 評論0 收藏0

  • 從Preact了解一個類React的框架是怎么實現(xiàn)的(三): 組件

    摘要：組件渲染首先我們來了解組件返回的虛擬是怎么渲染為真實，來看一下的組件是如何構(gòu)造的可能我們會想當(dāng)然地認(rèn)為組件的構(gòu)造函數(shù)定義將會及其復(fù)雜，事實上恰恰相反，的組件定義代碼極少。 前言 　　首先歡迎大家關(guān)注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵?！　≈胺窒磉^幾篇關(guān)于React的文章: React技術(shù)內(nèi)幕: k...

    AlphaWatch 評論0 收藏0

  • React中的“蟲洞”——Context

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

    muddyway 評論0 收藏0

  • React context 丟失問題

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

    Seay 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<