成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React中的Context怎么用

zhouzhou / 2056人閱讀

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

What is Context

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

什么是Context

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

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

怎樣使用Context

假設(shè)有個(gè)如下的結(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手動(dòng)的方式傳給了Button，這期間穿越了Message，而對(duì)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，可以實(shí)現(xiàn)在該組件子結(jié)構(gòu)下的所有組件（e.g. Button）直接通過定義contextTypes來(lái)獲取。

如果未定義contextTypes的話，context是一個(gè)空對(duì)象。

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

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

constructor(props, context)

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

componentDidUpdate(prevProps, prevState, prevContext)

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

無(wú)狀態(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，但不建議去使用。

如果想用的話，可以看下面的這個(gè)例子。
getChildContext方法會(huì)在state或props更新時(shí)被調(diào)用，可以通過局部狀態(tài)的更新進(jìn)而來(lá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
};

這里有個(gè)問題是，如果宿主組件的context更新了，其下使用該context的子組件可能因?yàn)槟硞€(gè)父組件的shouldComponentUpdate返回false而不做狀態(tài)更新。這就完全不符合通過使用context來(lái)控制組件狀態(tài)更新的初衷，所以證明使用context來(lái)管理組件狀態(tài)不太靠譜。
這里有篇博客關(guān)于介紹如何安全的使用context的。

不建議使用Context

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/88737.html

相關(guān)文章

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

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

    kumfo 評(píng)論0 收藏0

  • 高階組件 + New Context API = ?

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

    Joyven 評(píng)論0 收藏0

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

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

    AlphaWatch 評(píng)論0 收藏0

  • React中的“蟲洞”——Context

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

    muddyway 評(píng)論0 收藏0

  • React context 丟失問題

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

    Seay 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<