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

資訊專欄INFORMATION COLUMN

React v16.3.0: New lifecycles and context API

zombieda / 819人閱讀

摘要：為管理提供了一個(gè)新的方案，它為字符串提供了方便，并且沒有任何缺點(diǎn)司徒正美注意除了新的外，回調(diào)將繼續(xù)得到支持。例如司徒正美通常會(huì)將傳遞給它們包裝的組件。

幾天前，我們寫了一篇關(guān)于即將到來的對(duì)我們的傳統(tǒng)生命周期方法的變更的文章，包括逐步遷移策略。在React 16.3.0中，我們添加了一些新的生命周期方法來幫助遷移。我們還引入了新的API，用于長時(shí)間請(qǐng)求的特性:一個(gè)官方的上下文API、一個(gè)ref轉(zhuǎn)發(fā)API和一個(gè)更語意化的ref API。

請(qǐng)繼續(xù)閱讀，了解更多關(guān)于這個(gè)版本的信息。

官方認(rèn)證的 Context API

多年來，React為Context提供了一個(gè)實(shí)驗(yàn)性的API。雖然它是一個(gè)強(qiáng)大的工具，但是由于API中固有的問題，它的使用是不受歡迎的，因此我們打算用一個(gè)更好的API來替代這實(shí)驗(yàn)性的API。

React 16.3引入了一個(gè)新的Context API，它更高效，同時(shí)支持靜態(tài)類型檢查和深度更新。

注意
舊的ContextAPI 將繼續(xù)保留到React 16.x，所以您將有時(shí)間遷移。

下面是一個(gè)示例，說明如何使用新的上下文API注入“主題”:

## by 司徒正美
const ThemeContext = React.createContext("light");

class ThemeProvider extends React.Component {
  state = {theme: "light"};

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

class ThemedButton extends React.Component {
  render() {
    return (
      
        {theme =>
createRef API

以前，React提供了兩種管理refs的方法:字符串ref API和回調(diào)ref API。盡管字符串ref API比較方便，但是它有幾個(gè)缺點(diǎn)，所以我們的官方推薦是使用回調(diào)ref。

React 16.3為管理refs提供了一個(gè)新的方案，它為字符串ref提供了方便，并且沒有任何缺點(diǎn):

## by 司徒正美

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return ;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}
注意
除了新的createRef API外，回調(diào)refs將繼續(xù)得到支持。


您不需要在組件中替換回調(diào)refs。它們稍微靈活一些，因此它們將繼續(xù)作為一個(gè)高級(jí)特性。
forwardRef API

高階組件(或HOCs)是在組件之間重用代碼的常用方法。基于上面的主題上下文示例，我們可能會(huì)創(chuàng)建一個(gè)臨時(shí)對(duì)象，將當(dāng)前的“主題”作為一個(gè)屬性注入:

## by 司徒正美

function withTheme(Component) {
  return function ThemedComponent(props) {
    return (
      
        {theme => }
      
    );
  };
}

我們可以使用上述特殊的方式將組件連接到主題上下文，而不必直接使用主題上下文。例如:

## by 司徒正美

class FancyButton extends React.Component {
  buttonRef = React.createRef();

  focus() {
    this.buttonRef.current.focus();
  }

  render() {
    const {label, theme, ...rest} = this.props;
    return (
      
    );
  }
}

const FancyThemedButton = withTheme(FancyButton);

// We can render FancyThemedButton as if it were a FancyButton
// It will automatically receive the current "theme",
// And the HOC will pass through our other props.
;

HOCs通常會(huì)將props傳遞給它們包裝的組件。不幸的是，refs沒有沖透進(jìn)去。這意味著如果我們使用FancyThemedButton，我們就不能將ref添加到FancyButton中，因此我們無法調(diào)用focus()。

新的代理API通過提供一種方法來攔截一個(gè)ref，并將其轉(zhuǎn)發(fā)為一個(gè)普通的props，從而解決了這個(gè)問題:

## by 司徒正美

function withTheme(Component) {
  // Note the second param "ref" provided by React.forwardRef.
  // We can attach this to Component directly.
  function ThemedComponent(props, ref) {
    return (
      
        {theme => (
          
        )}
      
    );
  }

  // These next lines are not necessary,
  // But they do give the component a better display name in DevTools,
  // e.g. "ForwardRef(withTheme(MyComponent))"
  const name = Component.displayName || Component.name;
  ThemedComponent.displayName = `withTheme(${name})`;

  // Tell React to pass the "ref" to ThemedComponent.
  return React.forwardRef(ThemedComponent);
}

const fancyButtonRef = React.createRef();

// fancyButtonRef will now point to FancyButton
;
組件生命周期鉤子的變化

React的類組件API已經(jīng)存在多年，幾乎沒有變化。但是，當(dāng)我們?yōu)楦呒?jí)的特性(例如錯(cuò)誤邊界和即將到來的異步渲染模式)添加支持時(shí)，我們以它本來沒有打算的方式來擴(kuò)展這個(gè)模型。

例如，在當(dāng)前的API中，用一些非尋常的手段來阻止初始渲染是很容易的。在某種程度上，這是因?yàn)橛刑嗟你^子來完成這項(xiàng)既定的任務(wù)，而且還不清楚哪一個(gè)是最好的。我們已經(jīng)注意到錯(cuò)誤處理的中斷行為通常不會(huì)被考慮，并且可能導(dǎo)致內(nèi)存泄漏(這也會(huì)影響即將到來的異步渲染模式)。當(dāng)前的類組件API也使其他的工作變得復(fù)雜，比如我們的代碼優(yōu)化器（Prepack）的工作。

componentWillMount, componentWillReceiveProps, componentWillUpdate這些鉤子很容易引發(fā)問題，并且也嚴(yán)重?cái)_亂React的生命周期。基于這些原因，我們將廢棄這些方法，以支持更好的替代方案。

我們認(rèn)識(shí)到這一變化將影響許多現(xiàn)有的組件。因此，遷移路徑將盡可能平緩，并提供遷移方案。(在Facebook，我們擁有5萬多個(gè)React組件。我們也依賴于一個(gè)漸進(jìn)的發(fā)布周期!

注意
棄用警告將在React16以后的版本中啟用， 一直保留到17發(fā)布時(shí)。


即使在React17中，仍然可以使用它們，但是它們將添加“UNSAFE_”前綴，以表明它們可能導(dǎo)致問題。我們還準(zhǔn)備了一個(gè)自動(dòng)化的腳本，以便現(xiàn)有代碼中重命名它們。

除了廢棄不安全的生命周期鉤子外，我們還增加了一些新的生命周期鉤子:

getDerivedStateFromProps 用來componentWillReceiveProps。

getSnapshotBeforeUpdate，用在更新前從DOM中安全地讀取屬性。

StrictMode 組件

是一種專門用于暴露潛在問題的工具。與一樣，將 不會(huì)渲染到視圖中。它能為其子組件激活額外的檢查和警告。

注意
檢查只在開發(fā)模式下運(yùn)行;它們不會(huì)影響生產(chǎn)構(gòu)建。

雖然嚴(yán)格的模式不可能捕獲所有的問題(例如某些類型的竄改)，但它可以幫助很多人。如果您在嚴(yán)格的模式下看到警告，這些事情很可能會(huì)導(dǎo)致異步渲染的錯(cuò)誤。

在16.3版本中，StrictMode幫助:

識(shí)別具有不安全生命周期鉤子的組件。

關(guān)于遺留字符串ref API用法的警告。

檢測意想不到的副作用

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

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

相關(guān)文章

  • React組件生命周期

    摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。 React組件生命周期 此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。新的生命周期請(qǐng)看官...

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

  • React組件設(shè)計(jì)模式-Provider-Consumer

    摘要：和是成對(duì)出現(xiàn)的，每一個(gè)都會(huì)對(duì)應(yīng)一個(gè)。而每一對(duì)都是由創(chuàng)建出來的。是一個(gè)普通的組件，當(dāng)然，是需要位于組件的上層。又聲明了這個(gè)范圍的數(shù)據(jù)結(jié)構(gòu)。解決嵌套問題的方式也更優(yōu)雅。即使這一對(duì)的于另一對(duì)的的數(shù)據(jù)結(jié)構(gòu)和值的類型相同，這個(gè)也讓能訪問那個(gè)的上下文。 我們都知道，基于props做組件的跨層級(jí)數(shù)據(jù)傳遞是非常困難并且麻煩的，中間層組件要為了傳遞數(shù)據(jù)添加一些無用的props。而React自身早已提供了...

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

  • ReactV16.3，即將更改的生命周期

    摘要：我們目前的計(jì)劃是為不安全生命周期引入別名，和。從現(xiàn)在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。 注釋：本文是根據(jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對(duì)之前生命周期所出現(xiàn)的問題的總結(jié)，之后的React將逐步棄用一些生命周期和...

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

  • React中的“蟲洞”——Context

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

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

  • Glide的源碼分析(一) Activity的生命周期與圖片加載的關(guān)系

    摘要：從這段代碼入手分析分析從這段代碼可以看出無論傳入的是還是或者干脆傳入或都會(huì)調(diào)用這個(gè)方法而這個(gè)方法生成兩個(gè)對(duì)象對(duì)象，并把它加到上對(duì)象這兩個(gè)對(duì)象擁有共同的對(duì)象對(duì)象，當(dāng)系統(tǒng)調(diào)用的生命周期，的生命周期隨之被調(diào)用來處理列表，將的生命周期與的生命周期聯(lián) 從這段代碼入手分析Glide Glide.with(context) .load(url) .placehol...

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

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

0條評(píng)論

閱讀需要支付1元查看
<