重新學習 React (一) 生命周期_cct5,Fiber 調度和更新機製

2019-6-13 釋然 前端及開發文章及欣賞

如果您想訂閱本博客內容_炒葱椒鸡 菜系,每天自動發到您的郵箱中_-雅马哈电动车官网, 請點這裏

前幾天麵試問道 react 的相關知識-|365彩票登陆网址是多少,對我打擊比較大|_quick office,感覺對 react 認識非常膚淺|赢钱彩票,所以在這裏重新梳理一下|||金华艾克医院院长孙尚见,想想之前沒有仔細思考過的東西|-众发娱乐app怎么下载。

另外有說的不對的地方還請幫我指正一下|-18146大乐透开奖结果,先謝謝各位啦-陈妙林高尔夫事件。

目錄索引__江苏杀人案:

什麼是生命周期和調度-_河南省中小学生参加校外培训情况?

React 有一套合理的運行機製去控製程序在指定的時刻該做什麼事_诛仙离央,當一個生命周期鉤子被觸發後--涨潮时间,緊接著會有下一個鉤子_--云顶娱乐扫码,直到整個生命周期結束_|_臻爱a900。

生命周期

生命周期代表著每個執行階段-_139彩票网官网手机版,比如組件初始化-|钱王美庐,更新完成_|180彩票,馬上要卸載等等_||9岁女孩疑遭家暴,React 會在指定的時機執行相關的生命周期鉤子_-135彩票网站钱提不出来,使我們可以有機在程序運行中會插入自己的邏輯-|永和豆浆网上订餐。

調度

我們寫代碼的時候往往會有很多組件以及他們的子組件--_诺基亚主题制作,各自調用不同的生命周期__珠海电大成绩查询,這時就要解決誰先誰後的問題-__李连杰谢苗,在 react v16 之前是采用了遞歸調用的方式一個一個執行|-蓝工房,而在現在 v16 的版本中則采用了與之完全不同的處理(調度)方式--_三星5320,名叫 Fiber|-_7788电视剧百度影音,這個東西 facebook 做了有兩年時間-_亿贝平台简介,實現非常複雜||-索爱刷机软件。

具體 Fiber 它是一個什麼東西呢__360全国彩票开奖号码?不要著急|_-135彩票软件,我們先從最基本的生命周期鉤子看起||-102彩票。

React 生命周期詳解

首先看一下 React V16.4 後的生命周期概況(圖片來源

 

 

  • 從橫向看||盐都新闻,react 分為三個階段|||众彩平台怎么样:
    • 創建時
      • constructor() - 類構造器初始化
      • static getDerivedStateFromProps() - 組件初始化時主動觸發
      • render() - 遞歸生成虛擬 DOM
      • componentDidMount() - 完成首次 DOM 渲染
    • 更新時
      • static getDerivedStateFromProps() - 每次 render() 之前執行
      • shouldComponentUpdate() - 校驗是否需要執行更新操作
      • render() - 遞歸生成虛擬 DOM
      • getSnapshotBeforeUpdate() - 在渲染真實 DOM 之前
      • componentDidUpdate() - 完成 DOM 渲染
    • 卸載時
      • componentWillUnmount() - 組件銷毀之前被直接調用

一些幹貨

  • 有三種方式可以觸發 React 更新-_盈彩app下载,props 發生改變_智胜彩票下载,調用 setState() 和調用 forceUpdate()
  • static getDerivedStateFromProps() 這個鉤子會在每個更新操作之前(即使props沒有改變)執行一次|_致青春里面的乐队,使用時應該保持謹慎---128彩票。
  • componentDidMount() 和 componentDidUpdate() 執行的時機是差不多的--视觉卡盟,都在 render 之後-_|永盛彩票网靠谱吗,隻不過前者隻在首次渲染後執行|_198彩票平台,後者首次渲染不會執行
  • getSnapshotBeforeUpdate() 執行時可以獲得隻讀的新 DOM 樹|_-爱相约国际交友网,此函數的返回值為 componentDidUpdate(prevProps, prevState, snapshot) 的第三個參數

嚐試理解 Fiber

關於 Fiber|_11086移动彩票登不进去,強烈建議聽一下知乎上程墨Morgan的 live 《深入理解React v16 新功能》-|深圳股市大盘,這裏潛水員的例子和圖片也是引用於此 live-|新乡窝窝团购网。

背景

我們知道 React 是通過遞歸的方式來渲染組件的-_|都匀蓝宇装饰,在 V16 版本之前的版本裏|-|阿桑古卡,當一個狀態發生變更時--_cctv10怪兽之谜1,react 會從當前組件開始-掌上购彩可靠吗,依次遞歸調用所有的子組件生命周期鉤子|-|小学生400字日记,而且這個過程是同步執行的且無法中斷的_|-易富娱乐彩票app,一旦有很深很深的組件嵌套-|234平台,就會造成嚴重的頁麵卡頓--尊彩骗局,影響用戶體驗_|重庆公安局局长。

React 在V16版本之前的版本裏引入了 Fiber 這樣一個東西||长发速递,它的英文涵義為纖維_广告词语,在計算機領域它排在在進程和線程的後麵|_35彩票诈骗客户,雖然 React 的 Fiber 和計算機調度裏的概念不一樣|--北京十二中游泳馆,但是可以方便對比理解|_快乐大本营胡歌2005,我們大概可以想象到 Fiber 可能是一個比線程還短的時間片段|-365彩票是正宗的吗。

Fiber 到底做了什麼事

Fiber 把當前需要執行的任務分成一個個微任務|__三大舰队,安排優先級||_众赢财富通怎么样,然後依次處理_叫兽系列,每過一段時間(非常短_-_铁手无语,毫秒級)就會暫停當前的任務--_易旺彩票是真的吗,查看有沒有優先級較高的任務|--全国有多少人叫,然後暫停(也可能會完全放棄)掉之前的執行結果|-_成都群芳录,跳出到下一個微任務--_苏泊尔电压力锅使用方法。同時 Fiber 還做了一些優化|--365彩票国际电话,可以保持住之前運行的結果以到達複用目的_|_腾讯名人坊。

舉個潛水員的例子

我們可以把調度當成一個潛水員在海底尋寶-_-运盛娱乐彩票下载,v16 之前是通過組件遞歸的方式進行尋寶--易彩票是不是忽悠人的,從父組件開始一層一層深入到最裏麵的子組件_--百强中学,也就是如下圖所示-|芜湖拉手网。

 

 

 

而替換成了 Fiber 後|--365彩票,海底變成的狹縫(簡單理解為遞歸變成了遍曆)_|快门式3d电影下载,潛水員會每隔一小段時間浮出水麵|-2019年315曝光的净水器,看看有沒有其他尋寶任務_恩施天气。注意此時沒有尋到寶藏的話||银富鳞,那麼之前潛水的時間就浪費了-__168彩票官网登录7168。就這樣潛水員會一直下潛和冒泡-__长春市房地产报,具體如下圖所示_众购彩票娱乐。

 

 

 

引入 Fiber 後帶來的三個階段

從生命周期那張圖片縱向來看||渔我同行218,Fiber 將整個生命周期分成了三個階段--137期新粤彩涂:

  • render 階段
    • 由於 Fiber 會時不時跳出任務-栾海燕,然後重新執行__注册领28彩金,會導致該階段的生命周期調用多次的現象_-|锦州有线宽带,所以 React V16 之前 componentWillMount()-|如何在淘宝开店,componentWillUpdate()_男科悍医,componentWillReceiveProps() 的三個生命周期鉤子被加上了 UNSAFE 標記
    • 這個階段效率不一定會比之前同步遞歸來的快-__重庆公交集团招聘,因為會有任務跳出重做的性能損耗|亿彩彩票是正规平台吗,但是從宏觀上看--|盈众彩票,它不斷執行了最高優先級(影響用戶使用體驗)的任務_-|巨女渴爱,所以用戶使用起來會比以前更加的流暢
    • 這個階段的生命周期鉤子可能會重複調用___创业我们的故事,建議隻寫無副作用的代碼
  • pre-commit 階段
    • 該階段 DOM 已經形成___365彩票网为什么买不了,但還是隻讀狀態
    • 這個階段組件狀態不會再改變
  • commit 階段
    • 此時的 DOM 可以進行操作
    • 這個階段組件已經完成更新-临沂大学数字化校园,可以寫一些有副作用的代碼和添加其它更新操作_优购工品。

簡而言之_||佐研:以 render() 為界||找一段塑料包装袋,之前執行的生命周期都有可能會打斷並多次調用__歌手高林生,之後的生命周期是不可被打斷的且隻會調用一次-|掌上娱乐app时时彩。所以盡量把副作用的代碼放在隻會執行一次的 commit 階段||众彩网简介。

其它生命周期鉤子

除了上麵常用的鉤子-||注册送58元彩票红包,React 還提供了如下鉤子_||182彩票:

  • static getDerivedStateFromError() 在 render 階段執行-_|快速影视网,通過返回 state 更新組件狀態
  • componentDidCatch() 在 commit 階段執行|_-纤之瘦,可以放一些有副作用的代碼

更新機製

理解了生命周期和三個執行階段_开新换车连锁,就可以比較容易理解組件狀態的更新機製了--_木吉他拾音器。

setState()

這個方法可以讓我們更新組件的 state 狀態||亿发彩票怎么推广下级。第一個參數可以是對象_|檩条间距,也可以是 updater 函數-__金螳螂 朱兴良,如果是函數-_-优彩网网址是什么,則會接受當前的 state 和 props 作為參數-_-永盛是什么软件。第二個參數為函數__艾欧纳克斯,是在 commit 階段後執行_|-106官网彩,準確的說是在 componentDidUpdate() 後執行_||卡古宇。

setState() 的更新過程是異步的(除非綁定在 DOM 事件中或寫在 setTimeout 裏)|-隋唐大运河开凿顺序,而且會在最後合並所有的更新|||倪志福追悼会,如下-|-铜钱占卜:

Object.assign( previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)
複製代碼

之所以設計成這樣-|腹黑师父吃掉呆徒弟H,是為了避免在一次生命周期中出現多次的重渲染众乐彩票可靠吗,影響頁麵性能_-_qq2011官方下载。

forceUpdate()

如果我們想強製刷新一個組件_--360多种大厅彩票,可以直接調用該方法_-亿彩是真的吗,調用時會直接執行 render() 這個函數而跳過 shouldComponentUpdate()--九九归一打一生肖。

舉個極端例子

function wait() { return new Promise(resolve => {
    setTimeout(() => {
      resolve(); console.log("wait");
    }, 0);
  });
} //......省略組件創建 async componentDidMount() { await wait(); this.setState({ name: "new name" }); console.log("componentDidMount");
}

componentDidUpdate() { console.log("componentDidUpdate");
}

render() { console.log(this.state); return null } //......省略組件創建 // 輸出結果如下 // wait // {name: "new name"} // componentDidUpdate // componentDidMount // 注意 componentDidUpdate 的輸出位置_|-苏州园区车祸,一般情況下 // componentDidUpdate 都是在componentDidMount 後麵 // 執行的_-_网游快车金牌网吧下载,但是這裏因為setState 寫在了 await 後麵 // 所以情況相反--海诗神楼。 複製代碼

結語

了解 react 生命周期和更新機製確實有利於編寫代碼--塞班5800论坛,特別是當代碼量越來越大時--|易中彩票代玩,錯用的 setState 或生命周期鉤子都可能埋下越來越多的雷-易利娱乐怎样反水,直到有一天無法維護_-_盈彩网时时彩计划。_建厂网。__快乐大本营 棒棒堂。

我的個人建議如下--_038彩票提现多久到账:

  • 把副作用代碼通通放在 commit 階段||132彩票投注平台,因為這個階段不會影響頁麵渲染性能
  • 盡可能不要使用 forceUpdate() 方法_|_英国商人,借用 Evan You 的一句話_班主任自我介绍,如果你發現你自己需要在 Vue 中做一次強製更新--云谷彩票代理开户,99.9% 的情況|__1号计划app,是你在某個地方做錯了事
  • 隻要調用了 setState() 就會進行 render()__冬泉豹幼崽怎么获得,無論 state 是否改變
  • 知道 setState() 更新的什麼時候是同步的_-卓易彩票最新,什麼時候是異步的_|360彩票购彩大厅,參見上文
  • 不要把 getDerivedStateFromProps() 當成是 UNSAFE_componentWillReceiveProps() 的替代品_||速归速归 如果不归,因為 getDerivedStateFromProps() 會在每次 render() 之前執行-|兔斯基表情图片,即使 props 沒有改變




藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-卓易彩票出现暂停服务,為期望卓越的國內外企業提供卓越的UI界麵設計_2018政府打击云联惠、BS界麵設計 __-中乙联赛官网、 cs界麵設計 -|-亿人娱乐平台是骗局吗、 ipad界麵設計 |__11选5开奖助手ios、 包裝設計 _mf51、 圖標定製 _|陈卫生、 用戶體驗 _--369彩票官网注册、交互設計_上海酒吧砍人视频、 網站建設 __ems一般几天能到、平麵設計服務_|-华录s9000。

標簽: 生命周期 React 重新學習 (一) Fiber 調度和更新機製

Powered by emlog 京ICP備12006971號-1 sitemap