国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript實現自定義的生命周期

QiShare / 3471人閱讀

摘要:,和的流行,讓生命周期這個名詞常常出現在前端們的口中,以至于面試中最常見的一個問題也是介紹下的生命周期以及使用方法聽起來高大上的生命周期,其實也就是一些普通的方法,只是在不同的時期傳參調用它們而已。

React,Vue 和 Angular 的流行,讓“生命周期”這個名詞常常出現在前端們的口中,以至于面試中最常見的一個問題也是:

介紹下React, Vue的生命周期以及使用方法?

聽起來高大上的“生命周期”,其實也就是一些普通的方法,只是在不同的時期傳參調用它們而已。我們可以照著React的生命周期,自己模擬一個簡單的類,并讓這個類擁有一些生命周期鉤子

我們希望實現一個State類,這個類擁有以下方法和生命周期:

方法:

setState

生命周期:

willStateUpdate (nextState): 狀態將要改變

shouldStateUpdate (nextState): 是否要讓狀態改變,只有返回true才會改變狀態

didStateUpdate (prevState): 狀態改變后(要是 shouldStateUpdate 返回的不為true則不會調用)

class User extends State {
  constructor(name) {
    super();
    this.state = { name }
  }

  willStateUpdate(nextState) {
    console.log("willStateUpdate", nextState);
  }

  shouldStateUpdate(nextState) {
    console.log("shouldStateUpdate", nextState);
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }

  didStateUpdate(prevState) {
    console.log("didStateUpdate", prevState);
  }
}

const user = new User("deepred");

user.setState({ name: "hentai" });

首先,你需要知道JavaScript的面向對象基礎知識,如果還不是很了解,可以先看下這篇文章JavaScript的面向對象

setState的實現
class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    const preState = this.state;
    this.state = {
      ...preState,
      ...nextState,
    };
  }
}
class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }
}


const user = new User("tc");

user.setState({age: 10}); // {name: "tc", age: 10}

在React中,setState方法只會改變特定屬性的值,因此,我們需要在方法里用一個變量preState保留之前的state,然后通過展開運算符,將新舊state合并

willStateUpdate的實現

willStateUpdatestate狀態更新前調用的。因此只要在合并state前調用willStateUpdate就行

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    // 更新前調用willStateUpdate
    this.willStateUpdate(nextState);
    const preState = this.state;
    this.state = {
      ...preState,
      ...nextState,
    };
  }

  willStateUpdate() {
    // 默認啥也不做
  }

}
class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }

  // 覆蓋父級同名方法
  willStateUpdate(nextState) {
    console.log("willStateUpdate", nextState);
  }
}

const user = new User("tc");

user.setState({age: 10}); // {name: "tc", age: 10}
shouldStateUpdate的實現

我們規定只有shouldStateUpdate返回true時,才更新state。因此在合并state前,還要調用shouldStateUpdate

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    this.willStateUpdate(nextState);
    const update = this.shouldStateUpdate(nextState);
    if (update) {
      const preState = this.state;
      this.state = {
        ...preState,
        ...nextState,
      };
    }
  }

  willStateUpdate() {
    // 默認啥也不做
  }

  shouldStateUpdate() {
    // 默認返回true,一直都是更新
    return true;
  }

}
class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }

  // 覆蓋父級同名方法
  willStateUpdate(nextState) {
    console.log("willStateUpdate", nextState);
  }

  // 自定義何時更新
  shouldStateUpdate(nextState) {
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }
}


const user = new User("tc");

user.setState({ age: 10 }); // {name: "tc", age: 10}

user.setState({ name: "tc", age: 11 }); // 沒有更新
didStateUpdate的實現

懂了willStateUpdate也就知道didStateUpdate如何實現了

class State {
  constructor() {
    this.state = {};
  }

  setState(nextState) {
    this.willStateUpdate(nextState);
    const update = this.shouldStateUpdate(nextState);
    if (update) {
      const preState = this.state;
      this.state = {
        ...preState,
        ...nextState,
      };
      this.didStateUpdate(preState);
    }
  }

  willStateUpdate() {
    // 默認啥也不做
  }

  didStateUpdate() {
    // 默認啥也不做
  }

  shouldStateUpdate() {
    // 默認返回true,一直都是更新
    return true;
  }

}
class User extends State {
  constructor(name) {
    super();
    this.state = {
      name
    }
  }

  // 覆蓋父級同名方法
  willStateUpdate(nextState) {
    console.log("willStateUpdate", nextState);
  }

  // 覆蓋父級同名方法
  didStateUpdate(preState) {
    console.log("didStateUpdate", preState);
  }

  shouldStateUpdate(nextState) {
    console.log("shouldStateUpdate", nextState);
    if (nextState.name === this.state.name) {
      return false;
    }

    return true;
  }
}


const user = new User("tc");

user.setState({ age: 10 }); 

user.setState({ name: "tc", age: 11 });

通過幾十行的代碼,我們就已經實現了一個自帶生命周期的State類了!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101028.html

相關文章

  • 如何編寫一個React組件

    摘要:例如下面的代碼組件生命周期鉤子函數在組件掛載完成后立即被調用組件掛載完成渲染結果以上就是一個常規的組件編寫方式,不過我們還可以通過觀察上面的代碼,發現幾個有趣的地方中有一個函數是組件生命周期鉤子函數。 如何編寫一個React組件 在React的世界里,通常是用class來聲明一個組件的,它必須繼承自React.Component。例如下面的代碼: // MyFirstComponent...

    sPeng 評論0 收藏0
  • vue生命周期解析并通過表單理解MVVM(不僅理論,圖文并茂)

    摘要:在前端頁面中,把用純對象表示,負責顯示,兩者做到了最大限度的分離。的顯示與否和的布爾值有關,還是只關注數據的變化。兩個組件的布爾值通過兩個臨近的按鈕控制,初始值和的結果都是。組件的聲明在組件上,則完全沒有進入生命周期。 開始前說一說 吐槽 首先, 文章有謬誤的地方, 請評論, 我會進行驗證修改。謝謝。 vue真是個好東西,但vue的中文文檔還有很大的改進空間,有點大雜燴的意思,對于怎么...

    silvertheo 評論0 收藏0
  • 從入門到上線一個天氣小程序

    摘要:天氣預報小程序說了很多小程序開發的基礎準備,下面就結合個人實際練手項目天氣預報小程序簡單說明。物料準備從需求結果導向,天氣程序首先要能獲取到當前所在地天氣狀況,再次可以自由選擇某地,知道其天氣狀況。 前言 學習了一段時間小程序,大致過了兩遍開發文檔,抽空做個自己的天氣預報小程序,全當是練手,在這記錄下。小程序開發的安裝、注冊和接入等流程就不羅列了,在小程序接入指南已經寫得很清楚了,以下...

    Anshiii 評論0 收藏0
  • 為什么 React16 對開發人員來說是一種福音

    摘要:就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應該對更新框架感到興奮。錯誤邊界是一種組件。注意將作為值傳遞進去并不會導致使用。如果兩者不同,則返回一個用于更新狀態的對象,否則就返回,表示不需要更新狀態。 就像人們對更新移動應用程序和操作系統感到興奮一樣,開發人員也應該對更新框架感到興奮。不同框架的新版本具有新特性和開箱即用的技巧。 下面是將現有應用程序從 React 15...

    BicycleWarrior 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<