Hooks是什么

為啥要用Hooks

• 跨組件復(fù)用stateful logic十分困難 使用Hooks，你可以在將含有state的邏輯從組件中抽象出來，這將可以讓這些邏輯容易被測試。同時(shí)，Hooks可以幫助你在不重寫組件結(jié)構(gòu)的情況下復(fù)用這些邏輯。
• 復(fù)雜的組件難以理解 Hooks允許您根據(jù)相關(guān)部分(例如設(shè)置訂閱或獲取數(shù)據(jù))將一個(gè)組件分割成更小的函數(shù)，而不是強(qiáng)制基于生命周期方法進(jìn)行分割。
• 不止是用戶，機(jī)器也對Classes難以理解 Hooks讓你可以在classes之外使用更多React的新特性。

Hooks的優(yōu)點(diǎn)

更好的狀態(tài)復(fù)用

假設(shè)有如下需求：

創(chuàng)新互聯(lián)是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站備案、服務(wù)器租用、國際域名空間、軟件開發(fā)、微信小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國乃至全球的業(yè)務(wù)窗口：建站來電聯(lián)系：18980820575

當(dāng)組件實(shí)例創(chuàng)建時(shí)，需要?jiǎng)?chuàng)建一個(gè) state 屬性：name，并隨機(jī)給此 name 屬性賦值一個(gè)初始值。除此之外，還得提供一個(gè) setName 方法。你可以在組件其他地方開銷和修改此狀態(tài)屬性。

更重要的是: 這個(gè)邏輯要可以復(fù)用，在各種業(yè)務(wù)組件里復(fù)用這個(gè)邏輯。

在擁有 Hooks 之前，我首先會(huì)想到的解決方案一定是 mixin。

代碼如下：(此示例采用 vue2 mixin 寫法 )。

// 混入文件：name-mixin.js
export default {
  data() {
    return {
      name: genRandomName() // 假如它能生成隨機(jī)的名字
    }
  },
  methods: {
    setName(name) {
      this.name = name
    }
  }
}

// 組件：my-component.vue