本文轉載自【微信公眾號：前端人，ID：FrontendPeople】經微信公眾號授權轉載，如需轉載與原文作者聯絡

React元件可以分為類元件和函式元件。類元件具有生命週期、狀態，而函式元件卻沒有。

在React 16。8 新出來的Hooks 可以讓React函式元件具有狀態，並且提供了類似componentDidMount和componentDidUpdate等生命週期方法。

例子：

我們寫一個函式元件，如果想要更新它的狀態，在 React 16。8版本之前，就得重寫成 類元件。

在 React 16。8 出來的Hooks 之後，這就變得簡單多了。

使用新的useState hook 向普通函式元件新增狀態。

const ［clicked，useClicked］ = useState（false）；

// 分離出來寫法

const arr = useState（false）；

const clicked = arr［0］；

const useClicked = arr［1］；

Hooks 在16。8版本之後可以使用，它能讓我們在不使用class就能使用state和其它的react的特性。

比如：之前我們想要用state必須先寫一行：

class App extends React。Component{}

這樣才能用state和setState，但是現在有了hooks，就不需要了。我們可以在普通函式元件裡面使用hooks實現之前class裡的state、生命週期等。

為什麼要使用hooks呢？

因為setState。生命週期之類的函式其實是定義給元件的一些鉤子函式，它們被耦合在了class裡面，所以我們定義有狀態元件和有生命週期的元件必須定義class。而hooks的出現，把這些功能性的鉤子和class分離開了。

hooks包含 state hook 、effect hook、context hook等基礎的hooks，還有一些自定義hooks和一些其他的鉤子，可以再官方文件裡面檢視。