摘要:組件生命周期構造方法是對類的默認方法,通過命令生成對象實例時自動調用該方法。該生命周期可以發起異步請求,并。后廢棄該生命周期,可以在中完成設置渲染組件是一個組件必須定義的生命周期,用來渲染。該生命周期內可以進行。
React組件生命周期 constructor( ) 構造方法
constructor是ES6對類的默認方法,通過 new 命令生成對象實例時自動調用該方法。并且,該方法是類中必須有的,如果沒有顯示定義,則會默認添加空的constructor( )方法。當存在constructor的時候??必須手動調用super方法。
在constructor中如果要訪問this.props需要傳入props,示例如下:
class MyClass extends React.component{ constructor(props){ super(props); // 聲明constructor時必須調用super方法 console.log(this.props); // 可以正常訪問this.props } }
constructor 常用來初始化state
class MyClass extends React.Component { constructor(props){ super(props); this.state = { list: this.props.List }; } }
Class靜態方法實例屬性 初始化state
class ReactCounter extends React.Component { state = { list: [] }; }
具體文章可見Class-的靜態方法
componentWillMount() 組件掛載之前在組件掛載之前調用且全局只調用一次。如果在這個鉤子里可以setState,render后可以看到更新后的state,不會觸發重復渲染。該生命周期可以發起異步請求,并setState。(React v16.3后廢棄該生命周期,可以在constructor中完成設置state)
render() ?渲染組件render是一個React組件必須定義的生命周期,用來渲染dom。??不要在render里面修改state,會觸發死循環導致棧溢出。render必須返回reactDom
render() { const {nodeResultData: {res} = {}} = this.props; if (isEmpty(res)) return noDataInfo; const nodeResult = this.getNodeResult(res); return (componentDidMount() 組件掛載完成后{nodeResult});
在組件掛載完成后調用,且全局只調用一次??梢栽谶@里使用refs,獲取真實dom元素。該鉤子內也可以發起異步請求,并在異步請求中可以進行setState。
componentDidMount() { axios.get("/auth/getTemplate").then(res => { const {TemplateList = []} = res; this.setState({TemplateList}); }); }componentWillReceiveProps (nextProps ) props即將變化之前
props發生變化以及父組件重新渲染時都會觸發該生命周期,在該鉤子內可以通過參數nextProps獲取變化后的props參數,通過this.props訪問之前的props。該生命周期內可以進行setState。(React v16.3后廢棄該生命周期,可以用新的周期 static getDerivedStateFromProps 代替)
shouldComponentUpdate(nextProps, nextState) 是否重新渲染組件掛載之后,每次調用setState后都會調用shouldComponentUpdate判斷是否需要重新渲染組件。默認返回true,需要重新render。返回false則不觸發渲染。在比較復雜的應用里,有一些數據的改變并不影響界面展示,可以在這里做判斷,優化渲染效率。
componentWillUpdate(nextProps, nextState)shouldComponentUpdate返回true或者調用forceUpdate之后,componentWillUpdate會被調用。不能在該鉤子中setState,會觸發重復循環。(React v16.3后廢棄該生命周期,可以用新的周期 getSnapshotBeforeUpdate )
componentDidUpdate() 完成組件渲染除了首次render之后調用componentDidMount,其它render結束之后都是調用componentDidUpdate。該鉤子內setState有可能會觸發重復渲染,需要自行判斷,否則會進入死循環。
componentDidUpdate() { if(condition) { this.setState({..}) // 設置state } else { // 不再設置state } }componentWillUnmount() 組件即將被卸載
組件被卸載的時候調用。一般在componentDidMount里面注冊的事件需要在這里刪除。
生命周期圖 完整的生命周期示例class LifeCycle extends React.Component { constructor(props) { super(props); this.state = {str: "hello"}; } componentWillMount() { alert("componentWillMount"); } componentDidMount() { alert("componentDidMount"); } componentWillReceiveProps(nextProps) { alert("componentWillReceiveProps"); } shouldComponentUpdate() { alert("shouldComponentUpdate"); return true; // 記得要返回true } componentWillUpdate() { alert("componentWillUpdate"); } componentDidUpdate() { alert("componentDidUpdate"); } componentWillUnmount() { alert("componentWillUnmount"); } render() { alert("render"); return(React v16.3 新加入的生命周期 (轉載) react v16.3刪掉以下三個生命周期); } }{parseInt(this.props.num)}
{this.state.str}
componentWillMount
componentWillReceiveProps
componentWillUpdate
新增兩個生命周期static getDerivedStateFromProps
getSnapshotBeforeUpdate
static getDerivedStateFromProps觸發時間:在組件構建之后(虛擬dom之后,實際dom掛載之前) ,以及每次獲取新的props之后。
每次接收新的props之后都會返回一個對象作為新的state,返回null則說明不需要更新state.
配合componentDidUpdate,可以覆蓋componentWillReceiveProps的所有用法
class Example extends React.Component { static getDerivedStateFromProps(nextProps, prevState) { // 沒錯,這是一個static } }getSnapshotBeforeUpdate
觸發時間: update發生的時候,在render之后,在組件dom渲染之前。
返回一個值,作為componentDidUpdate的第三個參數。
配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。
class Example extends React.Component { getSnapshotBeforeUpdate(prevProps, prevState) { // ... } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95253.html
摘要:完整生命周期初始化參數第一次渲染當父組件向子組件傳入發生改變后,依次調用子組件更新渲染當組件自身發生變化后組件再次更新渲染當組件卸載生命周期詳解此處請求接口數據子組件獲得新時觸發,作用是在子組件再次渲染前,更新子組件自身的,之后會觸發接受的 完整生命周期 constructor(props) // 初始化參數 componentWillMount() render() // 第一次...
摘要:這個階段只有一個方法,該方法在整個生命周期內調用且僅調用一次。在這里進行一些相關的銷毀操作,比如撤銷定時器,事件監聽等等。 詳解 React 生命周期 整個 React 生命周期有3個階段:創建、更新、卸載,每個階段有對應的工作和方法,我們可以看下面這個經典的圖研究一下: showImg(https://segmentfault.com/img/remote/1460000016330...
摘要:本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體,把需要改變的返回即可。必須有一個返回值,返回的數據類型可以有。此生命周期主要用于優化性能。最后,說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始,生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...
摘要:除此之外指的是繞過通過直接添加的事件處理函數和產生的異步調用。但是,當在調用事件處理函數之前就會調用,這個函數會把修改為,造成的后果就是由控制的事件處理過程不會同步更新。 拋出問題 class Example extends Component { contructor () { super() this.state = { value: 0, ...
閱讀 1446·2021-11-24 09:39
閱讀 3626·2021-09-29 09:47
閱讀 1571·2021-09-29 09:34
閱讀 3067·2021-09-10 10:51
閱讀 2536·2019-08-30 15:54
閱讀 3216·2019-08-30 15:54
閱讀 869·2019-08-30 11:07
閱讀 1004·2019-08-29 18:36