摘要:此方法必須返回否則報錯則渲染,則不渲染在此聲明周期中可以考慮是否需要進行渲染避免不必要的性能浪費如果返回,那么將被完全跳過,直到下一個狀態改變。
一、基礎
先來介紹一個生命周期的定義:
1)componentWillMount(){}
// Mounting 安裝階段 // 在客戶端和服務器上,在初始渲染發生之前立即調用一次 如果在這個方法中調用setState, // render()將看到更新的狀態,并且只會執行一次,盡管狀態改變。
2)componentDidMount(){}
// Mounting 安裝階段 // 調用一次,只在客戶端(不在服務器上),在初始渲染發生后立即 // 子組件的componentDidMount()方法在父組件的componentDidMount()方法之前被調用 // setTimeout setInterval AJAX 在此之行,強烈建議
3)componentWillReceiveProps(nextProps){}
// Updating 更新階段 // 在組件接收新props時調用。初始渲染不調用此方法。 // 老的props可以用this.props 新值就用nextProps查看 // 在此函數中調用this.setState()不會觸發附加的渲染。
4)shouldComponentUpdate(nextProps, nextState){}
// Updating 更新階段 // 當正在接收新的道具或狀態時,在渲染之前調用。 // 此方法必須返回false or true 否則報錯 true則渲染,false則不渲染!在此聲明周期中可以考慮是否需要進行渲染!避免不必要的性能浪費 // 如果shouldComponentUpdate返回false,那么render()將被完全跳過,直到下一個狀態改變。此外,不會調用componentWillUpdate和componentDidUpdate。 // 默認返回true // 如果性能是一個瓶頸,特別是有幾十個或幾百個組件,請使用shouldComponentUpdate來加快您的應用程序。 // return true or false
5) componentWillUpdate(nextProps, nextState){}
// Updating 更新階段 // 當正在接收新的props或state時立即調用。初始渲染不調用此方法 // 您不能在此方法中使用this.setState()。如果您需要更新state以響應prop更改,請改用componentWillReceiveProps。
6)componentDidUpdate(nextProps, nextState){}
// Updating 更新階段 // 在組件的更新刷新到DOM后立即調用。初始渲染不調用此方法。 // 當組件已更新時,使用此操作作為DOM操作的機會
7)componentWillUnmount(){}
// Unmounting 卸載階段 // 在組件從DOM卸載之前立即調用。 // 在此方法中執行任何必要的清理,例如使計時器無效或清除在componentDidMount中創建的任何DOM元素。clearInterval or destroy二、生命周期的執行順序
舉例:只有一個組件,里面有一個onClick事件改編一個state
刷新頁面:
a、componentWillMount---> // 可以更改state render()----> componentDidMount // 周期結束
觸發onClick事件:(前提只有事件中出發setState,其他中沒有)
shouldComponentUpdate中 return true shouldComponentUpdate--> componentWillUpdate--> render()--> componentDidUpdate //周期結束 shouldComponentUpdate中 return false shouldComponentUpdate //周期結束
上面只是一個很簡單的例子講述了周期的執行順序,大家可以根據順序去做相應的操作,當然在componentWillUpdate和componentDidUpdate這兩個周期中不可以使用this.setState,需要使用此方法可以在componentWillReceiveProps中去操作。周期中可能進行的操作在上面的定義中以解釋。
舉例:父、子組件,父組件和上述相同,字段件只是一個純ui組件沒有任何的操作,接受父組件傳來的props(父組件的click可控制props的內容)。
刷新頁面:
父componentWillMount--->父render()---->子componentWillMount--->子render()--->子componentDidMount--->父componentDidMount
觸發onClick事件:
子組件shouldComponentUpdate 返回的是false 父shouldComponentUpdate-->父componentWillUpdate-->父render()-->父componentDidUpdate 子組件shouldComponentUpdate 返回的是true 父shouldComponentUpdate-->父componentWillUpdate-->父render()--->子componentWillReceiveProps--->子shouldComponentUpdate--->子componentWillUpdate---->子render()--->子componentDidUpdate--->父componentDidUpdate
componentWillUnmount階段
當你的組件關閉的時候,例如跳轉頁面的時候,此周期執行一次。可能做的操作在上面的定義。
給出一段代碼:(就是上述的子組件)
import React, { Component } from "react"; class Another extends Component { constructor(props) { super(props); this.state = { son:"子組件" } } componentWillMount() { console.log("子組件--Mounting-componentWillMount",this.state.son) } componentDidMount() { console.log("子組件--Mounting-componentDidMount",this.state.son) } componentWillReceiveProps(nextProps) { console.log("子組件--Updating-componentWillReceiveProps") } shouldComponentUpdate(nextProps, nextState) { console.log("子組件--Updating-shouldComponentUpdate") return true } componentWillUpdate(nextProps, nextState) { console.log("子組件--Updating-componentWillUpdate") } componentDidUpdate(nextProps, nextState) { console.log("子組件--Updating-componentDidUpdate") } componentWillUnmount() { } render() { return(我是子組件--我是子組件--我是子組件{this.props.name}) } } export default Another;
根據上面的代碼,說一個組件實例的初始化的方法過程
1)`getInitialState` 設置初始狀態值,(掉調用一次),可使用setState方法更改狀態
es6語法則在這是用:
constructor(props) { super(props); this.displayName="name"; this.事件名=this.事件名.bind(this);//綁定事件的this,這樣初始化只綁定一次,如果在render中邦定,則只要render就邦定一次。 this.state = { son:"子組件" } } static propTypes = { value:PropTypes.string, //類型的種類object string array func number bool any } static defaultProps={ value:"1" }
2)`getDefaultProps `設置初始props的值,不可以更改 es6語法參照上面的 static defaultProps 3)`propTypes `驗證傳遞給組件的props es6語法上述 static propTypes 4)`displayName `用于degbug調試消息,如果不寫,JSX將從變量賦值中推斷出類的displayName,es6語法如上述代碼片段中,例如下面
// Input (JSX): var Nav = React.createClass({ }); // Output (JS): var Nav = React.createClass({displayName: "Nav", });
執行的順序就是上述代碼片段的順序!
三、總結
詳細了解生命周期的特性,有助于處理數據,更好的節約性能。本人一點點小的見解,還望各位路過的大神,賞臉批評指正!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82038.html
摘要:面試官比較著急了,跟我溝通的時候,我才知道返回值不一定非要跟原生的一樣。騰訊一面平常開發怎么設計組件的。總結騰訊面試的感覺就是,沒有那么正式,都是部門的技術直接聯系的你,然后二面就是部門負責人了,決定了是否入職。 引入 面試過去了這么久,把八月份面試題和總結發一下吧,雖然年底大家可能都不換工作~ 還是可以看看的。 關于面試,引用葉老濕的一句話。你的簡歷是自己工作的答卷,項目經歷是你給面...
摘要:就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應該對更新框架感到興奮。錯誤邊界是一種組件。注意將作為值傳遞進去并不會導致使用。如果兩者不同,則返回一個用于更新狀態的對象,否則就返回,表示不需要更新狀態。 就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應該對更新框架感到興奮。不同框架的新版本具有新特性和開箱即用的技巧。 下面是將現有應用程序從 React 15...
摘要:譯者前端小智原文就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應該對更新框架感到興奮。錯誤邊界是一種組件。注意將作為值傳遞進去并不會導致使用。如果兩者不同,則返回一個用于更新狀態的對象,否則就返回,表示不需要更新狀態。 譯者:前端小智 原文:medium.freecodecamp.org/why-react16… 就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應...
摘要:最近官方在大會上宣布內測將引入。所以我們有必要了解,以及由此引發的疑問。在進一步了解之前,我們需要先快速的了解一些基本的的用法。如何解決狀態有關的邏輯的重用和共享問題。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好,我是谷阿莫,今天要將的是一個...,哈哈哈,看到這個題我就...
摘要:原由寫這篇文章主要是為了增強自己的記憶,同時也是為了分享一下我們常用的創建組建的方法,主要是四種,啟發來自于不知的博客呀,有興趣的人可以去看看他的博客敘述我們在用的時候考慮最多的其實就是如何策劃組建的劃分,組建的嵌套,能夠做到更省時省力。 原由:寫這篇文章主要是為了增強自己的記憶,同時也是為了分享一下我們常用的創建組建的方法,主要是四種(createClass, component, ...
閱讀 3639·2021-11-24 09:38
閱讀 3142·2021-11-15 11:37
閱讀 781·2021-11-12 10:36
閱讀 3547·2021-10-21 09:38
閱讀 3220·2021-09-28 09:36
閱讀 2420·2021-09-22 16:01
閱讀 4986·2021-09-22 15:09
閱讀 1210·2019-08-30 15:55