React生命周期方法componentDidMount

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

但是當(dāng)你數(shù)據(jù)初始化方法都寫在subscription方法時，當(dāng)你改了頁面訪問路徑，model里面的path沒改過來，初始化方法就調(diào)不到了。

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

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

{
  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} /> */}

上圖是在父頁面引用編輯頁，編輯頁是個Modal，通過editVisible控制，1  和  2 這兩種方式看起來是一樣的

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

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

2.或者，本來新增頁面某些輸入框的值是有初始值的，被編輯一次之后再進去，初始值變上次修改后的值

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

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

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

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

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

這個可以用在其他相似的情形。

React生命周期（getDerivedStateFromProps，componentDidMount）

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

componentDidMount

先看一下官方解釋

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

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

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

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

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

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

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

getDerivedStateFromProps

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

先說一下我的使用場景：

父組件中數(shù)據(jù)發(fā)生變化，要求子組件可以監(jiān)聽到數(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:"測試"
? ? ? }
? ? ? ? ?]
})
}
? render() {
? ? return <RoamRoute flyData={this.state.tableData}></RoamRoute>
? ? }

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

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

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

總結(jié)

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

最新評論