React Hook 實戰指南！（1）

什麼是React Hook？

React Hook簡介

Hook是React在16.8以上版本新增的API，此概念一出就引發界內強烈的反響，尤大大也悄咪的整出了vue-hook來跟風一波。

Hook的本質目的很簡單，但願咱們在不編寫類組件的狀況下也能使用state來構建組件自身數據，開發者在開發React應用的過程當中，編寫最多的組件有以下幾種：

1. 類組件（能夠構建state並接收props）

class App extends React.Component {}
複製代碼

2. 無狀態組件（只能接收props，沒法構建自身state）

const ListItem = (props) => (<div>{props.content}</div>)
複製代碼

3. 高階組件（HOC，負責抽離公共邏輯）

const HOC = (Component) => {
  // ...公共邏輯
	return <Component/>
}
複製代碼

這三種組件是構建最多的，咱們構建組件的時候也會根據業務需求進行思考，根據組件是否須要自身state來選擇類組件或者無狀態組件，並將複用的公共邏輯抽離到高階組件，可是實話說，組件分的越多，對開發者的考驗就越多，在開發前進行總體性思考的需求就越必要，而對於大多數人來講，對於類組件來講，更爲喜歡編寫無狀態組件，緣由不外乎就是由於：
構造類組件有必定的難度，尤爲是生命週期在16.4版本更新後，不只鉤子函數難以掌握（名字都老長了，還新增了static靜態方法來充當鉤子函數），生命週期學習成本高。

總結一下Hook想要解決的問題：

1. 在組件間複用狀態邏輯很難，高階組件和render props的技術老是屬於「我知道，可是我想不起來用」的狀態。
2. 複雜組件變得難以理解，在一個類組件中每每存在大量的生命週期函數，每一個鉤子函數的編寫都耗費了心機。
3. 難以理解的class，類組件不只有額外的學習成本（光處理個this就夠麻煩了），並且老是須要編譯，再不濟也得墊個墊片吧（@babel/polyfill）。

React對於目前存在的這些問題就一句話：「各位走好（各類組件），之後，這裏的一切，都交給Hook吧！」
Hook是怎麼解決這些問題的呢：

1. 複用邏輯？HOC？通通走開，所有拆成Hook組件，拆拆拆，拆的越多，複用越方便！
2. 生命週期改合併合併，該幹掉幹掉，就留一個useEffec函數，方便多了吧？
3. 類難寫？別寫！this整不明白？Hook組件就是個相似於無狀態組件的函數，哪來的this！

最最主要的是，Hook是漸進式提出的，意思就是說不會讓用戶一會兒就改寫爲Hook的開發模式，而是能夠慢慢來適應的，而在將來的某個版本纔會真正的移除class的寫法。

聽了這麼多，你們是否是對Hook已經充滿興趣了呢？Ok，讓咱們繼續往下走。

---

初識Hook真容

Hook究竟是什麼呢，Hook 是一些可讓你在無狀態組件裏「鉤入」 React state 及生命週期等特性的函數。Hook 不能在 class 組件中使用 —— 這使得你不使用 class 也能使用 React。

也就是說Hook只是一種「工具」，這種工具可讓咱們在無狀態組件中使用到state以及生命週期等特性，而在無狀態組件中使用來Hook工具後，咱們就稱這個組件爲**「函數組件」（其實我習慣稱爲Hook組件）。**

那麼就來看一個函數組件是怎麼變身的吧：

首先咱們先來看一個class組件的例子，咱們想要實現一個點擊按鈕就會計數的效果：

import React, { Component } from 'react';

class Example extends Component {
	constructor () {
  	super()
    // 想辦法先搞一個狀態出來
    this.state = { count: 0 }
    // 對方法中this的綁定
    this.setCount = this.setCount.bind(this)
  }
  // 更改狀態的方法
  setCount () {
  	this.setState((prevState) => ({ count: prevState.count + 1 }))
  }
  render () {
    // 最煩在這裏解構賦值
    let { count } = this.state
  	return (
      <div> <p>You clicked {count} times</p> <button onClick={this.setCount}> Click me </button> </div>
    );
  }
}
複製代碼

相信上面的代碼你們都能看明白，就很少說了，再看一下Hook實現的函數組件：

import React, { useState } from 'react';

function Example (props) {
  // 聲明一個叫 「count」 的 state 變量。
  const [count, setCount] = useState(0);

  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
  );
}
複製代碼

是否是感受眼前一亮呀，你們能夠看到，useState其實就是一個Hook函數，它能夠爲Example這個普普統統的無狀態組件添加一個叫作count的數據，並且還提供了一個setCount的專屬方法（一物降一物的感受）來更改這個count數據。傳入的0就是這個count數據的默認值，由於使用的是數組的解構賦值，因此數據和方法的名字能夠根據我的喜歡去命名，好比count + updateCount均可以。

你們能夠看到，轉換爲函數組件後不用再操心this的問題，編寫方法也簡單了不少，把構建狀態、設置默認值、構建更改狀態的方法都融合到短短的一行代碼中，並且也保留了無狀態組件使用傳入的props的方法，完美！

Ok，初識就到這裏，這裏只是爲給你們展現一下Hook的魅力，由於不喜歡枯燥的講解API，由於你們徹底能夠去官網查閱API文檔，因此在接下來的內容中，我將利用一個Todolist的例子來進行闡述，而這裏也更多的以代碼的展現爲主，想要學習更多的api的使用以及概念，仍是要去查閱問題喲。

記住：文檔基本沒有廢話，因此每句話都應該是知識點，讀文檔的時候要耐着性子一句一句的看完喲。