React生命周期方法componentDidMount

1. componentDidMount() 這個(gè)生命周期方法應(yīng)該是用的最多的，一般用在進(jìn)入頁(yè)面后，數(shù)據(jù)初始化，這種情況下，跟model中的 subscription方法作用是一樣的。

但是當(dāng)你數(shù)據(jù)初始化方法都寫(xiě)在subscription方法時(shí)，當(dāng)你改了頁(yè)面訪問(wèn)路徑，model里面的path沒(méi)改過(guò)來(lái)，初始化方法就調(diào)不到了。

但是要是把數(shù)據(jù)初始化接口都放在componentDidMount函數(shù)里，只要進(jìn)入頁(yè)面就會(huì)去執(zhí)行。

2.當(dāng)你有種情況：一個(gè)父頁(yè)面，一個(gè)編輯或新增（編輯新增通常為同一個(gè)頁(yè)面）頁(yè)被父頁(yè)面引用：

{
  editVisible ? <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> : null
}
{/* <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> */}

上圖是在父頁(yè)面引用編輯頁(yè)，編輯頁(yè)是個(gè)Modal，通過(guò)editVisible控制，1  和  2 這兩種方式看起來(lái)是一樣的

但是當(dāng)有時(shí)候你可能碰到這樣的情況：

1.就是在編輯頁(yè)面，你修改完數(shù)據(jù)后，關(guān)掉編輯頁(yè)，第二次打開(kāi)后，發(fā)現(xiàn)還是上次修改后的內(nèi)容。

2.或者，本來(lái)新增頁(yè)面某些輸入框的值是有初始值的，被編輯一次之后再進(jìn)去，初始值變上次修改后的值

這時(shí)就有區(qū)別了。

下圖是每次進(jìn)入到編輯頁(yè)面，就重置初始值（根據(jù)自己業(yè)務(wù)）：

我們想，只要在每次進(jìn)入到編輯頁(yè)的時(shí)候，去重置頁(yè)面的數(shù)據(jù)不就好了，所以可以通過(guò)在編輯/新增頁(yè)面的componentDidMount方法中，去每次的設(shè)置頁(yè)面的初始值。

但是，當(dāng)你用圖1的 2方式，你會(huì)發(fā)現(xiàn)，編輯頁(yè)面只有第一次加載時(shí)會(huì)被執(zhí)行，后面再進(jìn)去，還是出現(xiàn)值重置不了的問(wèn)題。

但是，截圖一種的方式1就不一樣了，編輯頁(yè)打開(kāi)（editVisible=true）時(shí)編輯頁(yè)才被引用，editVisible=false時(shí)，不被引用，所以，每次editVisible=true時(shí)，相當(dāng)于編輯頁(yè)每次都是第一次加載，所以componentDidMount方法中的方法每次都會(huì)被執(zhí)行，這樣問(wèn)題就解決了。

這個(gè)可以用在其他相似的情形。

React生命周期（getDerivedStateFromProps，componentDidMount）

之前的開(kāi)發(fā)過(guò)程中沒(méi)有遇到太多復(fù)雜的功能，所以就沒(méi)有使用到react的生命周期。最近在mars3d React基礎(chǔ)項(xiàng)目開(kāi)發(fā)中涉及了，生命周期的使用。

componentDidMount

先看一下官方解釋

https://zh-hans.reactjs.org/docs/react-component.html#componentdidmount

componentDidMount() 會(huì)在組件掛載后（插入 DOM 樹(shù)中）立即調(diào)用。依賴于 DOM 節(jié)點(diǎn)的初始化應(yīng)該放在這里。如需通過(guò)網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)，此處是實(shí)例化請(qǐng)求的好地方。

這個(gè)方法是比較適合添加訂閱的地方。如果添加了訂閱，請(qǐng)不要忘記在 componentWillUnmount() 里取消訂閱

你可以在 componentDidMount() 里直接調(diào)用 setState()。它將觸發(fā)額外渲染，但此渲染會(huì)發(fā)生在瀏覽器更新屏幕之前。如此保證了即使在 render() 兩次調(diào)用的情況下，用戶也不會(huì)看到中間狀態(tài)。請(qǐng)謹(jǐn)慎使用該模式，因?yàn)樗鼤?huì)導(dǎo)致性能問(wèn)題。

通常，你應(yīng)該在 constructor() 中初始化 state。如果你的渲染依賴于 DOM 節(jié)點(diǎn)的大小或位置，比如實(shí)現(xiàn) modals 和 tooltips 等情況下，你可以使用此方式處理

使用場(chǎng)景介紹：目前場(chǎng)景比較簡(jiǎn)單，就是初始化的時(shí)候要渲染dom，加載數(shù)據(jù)。

當(dāng)我的組件被插入到 DOM 樹(shù)之后，就會(huì)執(zhí)行 componentDidMount 生命周期,后面就不會(huì)再次執(zhí)行這個(gè)函數(shù)。

getDerivedStateFromProps

在使用getDerivedStateFromProps生命周期之前我使用的是componentWillReceiveProps生命周期，但是最新的react會(huì)有警告，推薦使用getDerivedStateFromProps，具體兩者的區(qū)別可以自己查閱資料了解一下。

先說(shuō)一下我的使用場(chǎng)景：

父組件中數(shù)據(jù)發(fā)生變化，要求子組件可以監(jiān)聽(tīng)到數(shù)據(jù)發(fā)生變化，并且將數(shù)據(jù)重新渲染。

class RoamLineList extends Component<any, any> {
? constructor(props) {
? ? super(props)
? ? this.state = {
? ? ? tableData: [], // 表格,
? ? }
//
demo() {
this.state.setState({
?tableData:[
? ? ? {
? ? ? ? id:1,
? ? ? ? key:1,
? ? ? ? name:"測(cè)試"
? ? ? }
? ? ? ? ?]
})
}
? render() {
? ? return <RoamRoute flyData={this.state.tableData}></RoamRoute>
? ? }

執(zhí)行demo方法向tableData中添加一條數(shù)據(jù)，在子組件中監(jiān)聽(tīng)到。

每次執(zhí)行demo()方法子組件都可以通過(guò)getDerivedStateFromProps生命周期獲取數(shù)據(jù)

static getDerivedStateFromProps(nextProps: any) {
? ? const data = nextProps.flyData
? ? return {
? ? ? roamLineData: [...data]
? ? }
? }

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論