成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 生命周期鉤子

tain335 / 3425人閱讀

摘要：個階段掛載階段構(gòu)造方法，接收一個屬性對象，由父組件傳入，如果父組件未傳入，則指向自身。在其中調(diào)用會引起組件重新渲染，組件本次的更新還沒有執(zhí)行完成，又會進(jìn)入新一輪的更新，導(dǎo)致不斷循環(huán)更新，進(jìn)入死循環(huán)。副作用操作，通常用于向后端請求數(shù)據(jù)。

3個階段

掛載階段

constructor

componentWillMount

render

componentDidMount

1. constructor 
class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {}
}

ES6 class構(gòu)造方法，接收一個props屬性對象，props由父組件傳入，如果父組件未傳入，則指向自身。

通常用于初始化state,以及綁定事件處理方法等工作

2.componentWillMount

組件被掛載到DOM前，只會調(diào)用1次, 一般用用更靠前的constructor代替，在其中調(diào)用this.setState()不會引起組件重新渲染。

3. render

組件的唯一必要方法，根據(jù)組件的props與state返回一個React元素，用于描述組件的UI

4.componentWillMount

組件被掛載到DOM后調(diào)用，且只會被掉用一次。在其中調(diào)用this.setState()會引起組件重新渲染，組件本次的更新還沒有執(zhí)行完成，又會進(jìn)入新一輪的更新，導(dǎo)致不斷循環(huán)更新，進(jìn)入死循環(huán)。
副作用操作，通常用于向后端請求數(shù)據(jù)。

更新階段

componentWillReceiveProps(nextProps)

shoudComponentUpdate(nextProps, nextSate)

componentWillUpdate

render

componentDidUpadate(prevProps, prevState)

1.componentWillReceiveProps(nextProps)

props變化會觸發(fā)componentWillReceiveProps，setState()不會觸發(fā)

2.shoudComponentUpdate(nextProps, nextSate)

判斷組件是否繼續(xù)更新,減少不必要渲染，優(yōu)化

3.componentWillUpdate

在render前調(diào)用，作為組件更新前執(zhí)行某些工作過的地方，（shoudComponentUpdate， componentWillUpdate 不能調(diào)用setState()避免引起循環(huán)調(diào)用）

4.componentDidUpadate(prevProps, prevState)

組件更新后調(diào)用，可以作為更新后調(diào)用DOM的地方，兩個參數(shù)代表prevProps, prevState，
更新前的屬性和狀態(tài)。

卸載階段

組件從DOM中移除的階段。可用于清楚組件中使用中的定時器，清除componentDidMount手動創(chuàng)建的DOM等等，避免內(nèi)存泄露。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95376.html

相關(guān)文章

  • React專題：生命周期

    摘要：而生命周期鉤子，就是從生到死過程中的關(guān)鍵節(jié)點。異步渲染下的生命周期花了兩年時間祭出渲染機制。目前為這幾個生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個大活寶。生命周期鉤子的最佳實踐是在這里初始化。 本文是『horseshoe·React專題』系列文章之一，后續(xù)會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個人博客 獲得無與倫比的閱讀體驗 生命周期...

    Hanks10100 評論0 收藏0

  • 捋一捋React的生命周期

    摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數(shù)這些方法會在組件初始化的時候被調(diào)用，只跟實例的創(chuàng)建有關(guān)。 前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

    MobService 評論0 收藏0

  • React 生命周期

    摘要：同步渲染的痛點當(dāng)應(yīng)用的組件樹特別龐大時，由于是單線程的，重新渲染一旦開始，中間不會停，如果這時候用戶去操作，比如輸入，點擊按鈕，此時頁面是沒有響應(yīng)的。 React生命周期 基礎(chǔ)生命周期鉤子 constructor 如果你不初始化狀態(tài)，也不綁定方法，那么你就不需要為React組件實現(xiàn)構(gòu)造函數(shù)。在這里初始化狀態(tài)可以直接對this.state賦值，在這里使用props時，應(yīng)當(dāng)通過this.p...

    Dean 評論0 收藏0

  • React-新的生命周期（React16版本）

    摘要：組件生命周期的三個階段加載階段更新階段卸載階段舊的生命周期加載階段涉及個鉤子函數(shù)加載的時候調(diào)用一次，可以初始化設(shè)置默認(rèn)的，也可以用設(shè)置組件的默認(rèn)屬性。 組件生命周期的三個階段 Mounting（加載階段） Updating（更新階段） Unmounting（卸載階段） 舊的生命周期 showImg(https://segmentfault.com/img/bVbhRhS?w=761...

    chinafgj 評論0 收藏0

  • 【全棧React】第7天: 生命周期鉤子函數(shù)

    摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將看看我們可以用于組件的一些最常見的生命周期鉤子函數(shù)，我們將討論為什么它們是有用的，什么時間應(yīng)該用什么。我們使用的一個更常見的生命周期鉤子是鉤子。這些是我們可以在框架中進(jìn)行交互的一些生命周期鉤子。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3827原文：https://www.full...

    Joyven 評論0 收藏0

  • React組件生命周期詳解

    摘要：組件生命周期構(gòu)造方法是對類的默認(rèn)方法，通過命令生成對象實例時自動調(diào)用該方法。該生命周期可以發(fā)起異步請求，并。后廢棄該生命周期，可以在中完成設(shè)置渲染組件是一個組件必須定義的生命周期，用來渲染。該生命周期內(nèi)可以進(jìn)行。 React組件生命周期 constructor( ) 構(gòu)造方法 constructor是ES6對類的默認(rèn)方法，通過 new 命令生成對象實例時自動調(diào)用該方法。并且，該方法是...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

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