你還在為該使用無狀態組件（Function）還是有狀態組件（Class）而煩惱嗎？
——擁有了hooks，你再也不需要寫Class了，你的所有組件都將是Function。

你還在為搞不清使用哪個生命周期鉤子函數而日夜難眠嗎？
——擁有了Hooks，生命周期鉤子函數可以先丟一邊了。

你在還在為組件中的this指向而暈頭轉向嗎？
——既然Class都丟掉了，哪里還有this？你的人生第一次不再需要面對this。

這樣看來，說React Hooks是今年最勁爆的新特性真的毫不夸張。如果你也對react感興趣，或者正在使用react進行項目開發，答應我，請一定抽出至少30分鐘的時間來閱讀本文好嗎？所有你需要了解的React Hooks的知識點，本文都涉及到了，相信完整讀完后你一定會有所收獲。

一個最簡單的Hooks

首先讓我們看一下一個簡單的有狀態組件：

class Example extends React.Component { constructor(props) { super(props); this.state = {  count: 0 }; } render() { return (  <div>  <p>You clicked {this.state.count} times</p>  <button onClick={() => this.setState({ count: this.state.count + 1 })}>   Click me  </button>  </div> ); }}

我們再來看一下使用hooks后的版本：

import { useState } from 'react';function Example() { const [count, setCount] = useState(0); return ( <div>  <p>You clicked {count} times</p>  <button onClick={() => setCount(count + 1)}>  Click me  </button> </div> );}

是不是簡單多了！可以看到，Example變成了一個函數，但這個函數卻有自己的狀態（count），同時它還可以更新自己的狀態（setCount）。這個函數之所以這么了不得，就是因為它注入了一個hook--useState，就是這個hook讓我們的函數變成了一個有狀態的函數。

除了useState這個hook外，還有很多別的hook，比如useEffect提供了類似于componentDidMount等生命周期鉤子的功能，useContext提供了上下文（context）的功能等等。

Hooks本質上就是一類特殊的函數，它們可以為你的函數型組件（function component）注入一些特殊的功能。咦？這聽起來有點像被詬病的Mixins啊？難道是Mixins要在react中死灰復燃了嗎？當然不會了，等會我們再來談兩者的區別。總而言之，這些hooks的目標就是讓你不再寫class，讓function一統江湖。

React為什么要搞一個Hooks？

想要復用一個有狀態的組件太麻煩了！

我們都知道react都核心思想就是，將一個頁面拆成一堆獨立的，可復用的組件，并且用自上而下的單向數據流的形式將這些組件串聯起來。但假如你在大型的工作項目中用react，你會發現你的項目中實際上很多react組件冗長且難以復用。尤其是那些寫成class的組件，它們本身包含了狀態（state），所以復用這類組件就變得很麻煩。