摘要:不能在,和中調(diào)用組件各生命周期的應(yīng)用方法或者對(duì)象只在組件類創(chuàng)建的時(shí)候調(diào)用一次,之后會(huì)被緩存起來。會(huì)和父組件設(shè)置的進(jìn)行合并。在接收到新的或者之前立刻調(diào)用。如果需要更新來響應(yīng)某個(gè)的改變,請(qǐng)使用。橫向滾動(dòng)寬度在組件從中移除的時(shí)候立刻被調(diào)用。
目錄
1.react組件的兩種創(chuàng)建寫法
2.組件的生命周期在不同狀態(tài)下的執(zhí)行順序
3.組件各生命周期的應(yīng)用
1.react組件的兩種創(chuàng)建寫法第一種ES5寫法,React.createClass
React.createClass({ getDefaultProps() { return { key1:value1 } }, getInitialState() { return { state1:state1 } } });
第二種是ES6寫法,繼承React.Component類
export default class Test1 extends React.Component { constructor (props) { super(props); this.state = { state1: state1 } } static defaultProps = { data: 2, }; static propTypes = { optionsData: React.PropTypes.array, onSelect: React.PropTypes.func, selectedOption: React.PropTypes.object, topStyle: React.PropTypes.any, placeholder: React.PropTypes.string } }
getDefaultProps、getInitialState是在createClass時(shí)調(diào)用的方法,而在繼承component類時(shí),getDefaultProps方法對(duì)應(yīng)給類添加靜態(tài)屬性 defaultProps ,getInitialState 對(duì)應(yīng)在類的構(gòu)造函數(shù)中設(shè)置 state屬性
2.組件的生命周期在不同狀態(tài)下的執(zhí)行順序組件首次裝載(first-Mount):
getDefaultProps() →
getInitialState() →
componentWillMount() →
render() →
componentDidMount()
卸載組件時(shí)(Unmount):componentWillUnmount()
當(dāng)重新裝載組件時(shí)(Re-Mount):
getInitialState()→
componentWillMount()→
render() →
componentDidMount(),
但并不執(zhí)行 getDefaultProps; defaultProps是放在組件類上的static屬性
當(dāng)再次渲染組件時(shí)(Re-Render),此時(shí)按順序執(zhí)行
componentWillReceiveProps(nextProps )(組件接收到新的props才會(huì)調(diào)用,只是改變state時(shí)不調(diào)用)→
shouldComponentUpdate(組件接收到新的props才會(huì)調(diào)用,只是改變state時(shí)不調(diào)用)→
componentWillUpdate→
render →
componentDidUpdate。
多帶帶調(diào)用setState的重新渲染
componentWillUpdate→
render →
componentDidUpdate
1、在單頁(yè)應(yīng)用中,用react-router的history做頁(yè)面跳轉(zhuǎn)時(shí),是將當(dāng)前route的所有組件卸載,再跳轉(zhuǎn)回來時(shí)是重新裝載組件,而不是首次裝載。
2、在使用react-native的Navigator時(shí),每次push新頁(yè)面的時(shí)候是首次加載,舊頁(yè)面沒有卸載,在pop新頁(yè)面的時(shí)候,新頁(yè)面會(huì)卸載 調(diào)用Unmount,舊頁(yè)面是重新渲染
componentWillReceiveProps→
componentWillUpdate→
render →
componentDidUpdate。
,不是重新裝載,也沒有重新渲染的shouldComponentUpdate控制,所以pop回來肯定重新渲染。
3、組件在內(nèi)存中裝載過一次之后,組件的defaultProps就初始化了,之后裝載就不會(huì)重新設(shè)置。
4、父組件的render都會(huì)引起子組件的重新渲染。
5、 不能在componentWillUpdate ,render和componentDidUpdate 中調(diào)用setState
3.組件各生命周期的應(yīng)用3.1 getDefaultProps方法 或者 defaultProps 對(duì)象
只在組件類創(chuàng)建的時(shí)候調(diào)用一次,之后會(huì)被緩存起來。
defaultProps在組件實(shí)例之前創(chuàng)建,實(shí)例間共享。
會(huì)和父組件設(shè)置的props進(jìn)行合并。
3.2 getInitialState方法或constructor的state屬性
項(xiàng)目中會(huì)把組件用到的state初始化在這里
constructor (props) { super(props); this.state = { poi: null, activeTabId: null, cartCount: Shopcart.size(), domSize:{ headerHeight: 100, bannerHeight: 200, categoryTabHeight: 100, }, hiddenBanner: false //是否隱藏banner }; }
3.3 componentWillMount()
組件初次render之前調(diào)用,如果在此方法中調(diào)用setState,render將感知到更新后的state,并且只執(zhí)行這一次render,可以在此方法中fetch數(shù)據(jù),不需要dom操作的數(shù)據(jù)獲取。
3.4 render()
組件渲染的方法,是組件唯一的必須實(shí)現(xiàn)的方法,在該方法中,我們可以通過props和state渲染不同的組件。返回null或者false代表不渲染任何東西。
render () { return (); } {this.renderLeftComponent()} {this.props.title || "美團(tuán)商超"} {this.renderRightComponent()}
3.5 componentDidMount()
組件裝載后調(diào)用的方法,因?yàn)樵摲椒ㄕ{(diào)用的時(shí)候,組件已經(jīng)裝載,并且該方法不在render的循環(huán)當(dāng)中,一般在該方法中做一些fetch數(shù)據(jù)或者改變state的方法。
還可以通過ReactDOM.findDOMNode(_this.refs.wrapper) 來獲取DOM節(jié)點(diǎn) 進(jìn)行操作。
componentDidMount() { this.mounted = true; if(this.props.poi){ this.fetchCategoryTabs(this.props.poi.poiId); } if(!this.isCalculate) { this.calculateWidth(); } }
3.6 componentWillReceiveProps(nextProps)
在組件接收到新的 props 的時(shí)候調(diào)用。在初始化渲染的時(shí)候,該方法不會(huì)調(diào)用。可以在該方法中判斷,當(dāng)props變化時(shí),是否再去重新fetch數(shù)據(jù),setState。
componentWillReceiveProps (nextProps) { if(nextProps.poi &&(nextProps.poi != this.props.poi)) { this.fetchBannerList(nextProps.poi.poiId); } }
3.7 shouldComponentUpdate(nextProps, nextState)
在接收到新的props或者state變化時(shí),被調(diào)用,該方法在初始化渲染和forceUpdate的時(shí)候不會(huì)被調(diào)用。
默認(rèn)返回true,如果返回false,則render不會(huì)執(zhí)行。可以在這個(gè)方法中來阻止不必要的render,因?yàn)橛袝r(shí)是因?yàn)楦附M件的render引起的子組件不必要的render。
shouldComponentUpdate(nextProps, nextState) { const isStateChanged = Object.keys(nextState).some(key=> { return nextState[key] !== this.state[key] }); const isPropsChanged = Object.keys(nextProps).some(key=> { return nextProps[key] !== this.props[key] }); return isStateChanged || isPropsChanged }
3.8 componentWillUpdate(nextProps, nextState)
在接收到新的 props 或者 state 之前立刻調(diào)用。在初始化渲染的時(shí)候該方法不會(huì)被調(diào)用。使用該方法做一些更新之前的準(zhǔn)備工作。你不能在剛方法中使用 this.setState()。如果需要更新 state 來響應(yīng)某個(gè) prop 的改變,請(qǐng)使用 componentWillReceiveProps。 項(xiàng)目中應(yīng)用不多。
3.9 componentDidUpdate
在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會(huì)在初始化渲染的時(shí)候調(diào)用。使用該方法可以在組件更新之后操作 DOM 元素。
有些操作可能需要操作DOM元素,并且在第一次componentDidMount時(shí)還沒有達(dá)到條件,所以需要在componentDidUpdate時(shí)再做操作,但是componentDidUpdate在render的循環(huán)函數(shù)中,
所以需要設(shè)置變量做控制。
下面例子中 this.isCalculate 就是判斷是否計(jì)算過的變量。
componentDidMount() { this.mounted = true; if(this.props.poi){ this.fetchCategoryTabs(this.props.poi.poiId); } if(!this.isCalculate) { this.calculateWidth(); } } componentDidUpdate () { if(!this.isCalculate) { this.calculateWidth(); } } calculateWidth () { if(this.isCalculate) { return; } let tablist = this.state.categoryTabs; if(tablist.length == 0) { return; } let tabsDOM = this.refs.tablist, childrensDOM = tabsDOM.childNodes, container = this.refs.tabcontainer, wrapper = this.refs.wrapper, // 橫向滾動(dòng)寬度 scrollwidth = 5; for(let i=0; i3.10 componentWillUnmount
在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。在該方法中執(zhí)行任何必要的清理,比如無效的定時(shí)器,或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。
可以記錄組件的mount狀態(tài),在 componentDidMount 中設(shè)置this.mounted = true 。 在componentWillUnmount 中設(shè)置 this.mounted = false。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/91133.html
摘要:我們目前的計(jì)劃是為不安全生命周期引入別名,和。從現(xiàn)在開始,只有新的生命周期名稱將起作用。從版本開始,更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。 注釋:本文是根據(jù)React的官方博客翻譯而成(文章地址:https://reactjs.org/blog/2018...)。主要講述了React之后的更新方向,以及對(duì)之前生命周期所出現(xiàn)的問題的總結(jié),之后的React將逐步棄用一些生命周期和...
摘要:得益于運(yùn)行階段處理邏輯的設(shè)計(jì),支持將使用的應(yīng)用轉(zhuǎn)換成微信小程序。我們也在考察這一新的跨端方案和微信小程序融合轉(zhuǎn)化的可行性。 作者:京東ARES多端技術(shù)團(tuán)隊(duì) 前言 Alita是一套由京東ARES多端技術(shù)團(tuán)隊(duì)打造的React Native代碼轉(zhuǎn)換引擎工具。它對(duì)React語法有全新的處理方式,支持在運(yùn)行時(shí)處理React語法,實(shí)現(xiàn)了React Native和微信小程序之間的主要組件對(duì)齊,可以用...
摘要:譯的生命周期的使用場(chǎng)景原文鏈接作者翻譯上名這個(gè)圖片,就是組件的生命周期,從形成到銷毀的過程。這并不意味著沒有用。最常見的用例更新以響應(yīng)或更改。是否可以調(diào)用總結(jié)在理想的世界中,我們不會(huì)使用生命周期方法。 [譯]React 的生命周期的使用場(chǎng)景 showImg(https://segmentfault.com/img/bVLTCt?w=2000&h=800); 原文鏈接:React Lif...
摘要:一個(gè)組件的生命周期分為三個(gè)部分實(shí)例化存在期和銷毀時(shí)。如果回調(diào)函數(shù)以函數(shù)的方式來指定,那么在組件更新的時(shí)候回調(diào)會(huì)被調(diào)用次。 一個(gè)React組件的生命周期分為三個(gè)部分:實(shí)例化、存在期和銷毀時(shí)。 實(shí)例化階段 客戶端渲染時(shí),如下依次被調(diào)用 getDefaultProps() getInitialState() componentWillMount() render() component...
摘要:同步渲染的痛點(diǎn)當(dāng)應(yīng)用的組件樹特別龐大時(shí),由于是單線程的,重新渲染一旦開始,中間不會(huì)停,如果這時(shí)候用戶去操作,比如輸入,點(diǎn)擊按鈕,此時(shí)頁(yè)面是沒有響應(yīng)的。 React生命周期 基礎(chǔ)生命周期鉤子 constructor 如果你不初始化狀態(tài),也不綁定方法,那么你就不需要為React組件實(shí)現(xiàn)構(gòu)造函數(shù)。在這里初始化狀態(tài)可以直接對(duì)this.state賦值,在這里使用props時(shí),應(yīng)當(dāng)通過this.p...
閱讀 2917·2021-11-19 09:40
閱讀 3602·2021-10-09 09:43
閱讀 2683·2021-09-22 15:31
閱讀 1736·2021-07-30 15:31
閱讀 790·2019-08-30 15:55
閱讀 3268·2019-08-30 15:54
閱讀 1170·2019-08-30 11:26
閱讀 1918·2019-08-29 13:00