componentwillmount:render之前最後一次修改狀態的機會
render:只能訪問this.props 和 this.state ，不允許修改狀態和dom輸出
componentdidmount:成功render並渲染完成真實的dom之後觸發，可以修改dom
componentwillreceiveprops:父元件修改屬性觸發
shouldcomponentupdate: 返回false會阻止render呼叫
componentwillupdate: 不能修改屬性和狀態
render:只能訪問this.props和this.state ，不允許修改狀態和dom輸出
componentdidupdate:可以修改dom
componentwillunmount: 在刪除元件之前進行清理操作，比如計時器和事件***
注意：1.componentwillmount，在ssr中 ，這個方法將會被多次呼叫，所以會重複觸發多遍， 同時在這裡如果繫結事件，講無法解綁 ，導致記憶體洩漏 ， 變得不夠安全高效， 逐步廢棄 。
2.componentwillreceiveprops ，外部元件多次頻繁更新傳入多次不同的props，會導致不必要的非同步請求
3.componentwillupdate ，更新前記錄dom狀態，可能會做一些處理， 與componentdidupdate相隔時間如果過長 ，會導致狀態不太新
1.getderivedstatefromprops， 第一次的初始化元件以及後續的更新過程中（包括自身狀態更新以及父傳子），返回乙個物件作為新的state，返回null則說明不需要在這裡更新state
2.getsnapshotbeforeupdate，取代了componentwillupdate，觸發時間為update發生的時候 ，在render之後 ， dom渲染之前，返回乙個值 ， 作為componentdidupdate的第三個引數 。
import react,
from 'react'
import axios from 'axios'
class
extends
component
componentdidmount()
)}) console.
log(
'componentdidmount')}
componentwillmount()
render()
>
<
/li>
) console.
log(
'render'
)return
hello --
<
/ul>
<
/div>
}}
shouldcomponentupdate
(nextprops, nextstate)
return
true
}
import react,
from 'react'
class
extends
component
render()
>衣服<
/li>
> 褲子<
/li>
> 鞋<
/li>
<
/ul>
child--
-<
/child>
<
/div>
}handleclick
(type))}
}class
child
extends
component
componentwillreceiveprops
(nextprops)
}
class
child
extends
component
render()
<
/div>
}componentdidmount()
componentwillunmount()
// unsafe_componentwillreceiveprops(nextprops)
static
getderivedstatefromprops
(props, state)
}componentdidupdate
(prevprops, prevstate)
console.
log(
"axios 發請求 帶上引數"
+this.state.childtype)
}}
getsnapshotbeforeupdate =
(prevprops, prevstate)
=>
}componentdidupdate
(prevprops,prevstate,data)
1.shouldcomponentupdate ，控指元件自身或者子元件是否需要更新，尤其在子元件非常多的情況下，需要進行優化
2.purecomponent ，會幫你比較 新props和舊的props, 新的state和老的state（值相等，或者物件含有相同的屬性，且屬性值相等），決定shouldcomponentupdate返回true或者false，從而決定要不要呼叫render function 。
注意，如果你的state和props永遠都會變，那purecomponent並不會比較快，因為shallowequal也需要時間
React 生命週期 生命週期方法
生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...
react 生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...
react生命週期
盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...