前言

React Hooks在React v16.8正式穩定版中加入。

Hooks是什么?

1. React Hooks 就是讓你不必寫class組件就可以用state和其他的React特性；
2. 你也可以編寫自己的hooks在不同的組件之間復用；

最近很多人都在談論 React Hooks。當使用React類組件那么久，使用React hooks需要一些觀念轉變。React官方團隊明確表示他們將會據需支持類組件，那為什么還要使用React Hooks呢？

接下來是一個5分鐘的例子將你帶入hooks，讓我們一起了解吧。

例子

我們的例子是 一個按鈕帶有是否激活狀態，當點擊的時候切換顏色。

開始

我們有一個簡單的按鈕組件，我們想讓他變的簡單，所以寫了一個功能函數：

const Button = props => {return (<div className="button" onClick={props.onClick} >{props.text}</div>)
}
復制代碼

我們可以傳遞自定義的 onClick 事件 和 text屬性。

但是，如果我們想要當按鈕激活改變其顏色要怎么辦？ 假如，我們已經有100個組件用了這個按鈕，我們不想再加其他屬性，顏色屬性讓按鈕自己控制也足夠簡單。

轉換到類

唯一的問題是我們將會需要一些狀態。假設現在在hooks出現之前，我們只能將其轉換成class，才能控制state。

class ButtonWithClass extends React.Component {state = {active: false};render() {return (<div className={this.state.active ? "active-button" : "default-button"}>onClick={() => { this.setState({active: !this.state.active}); this.props.onClick();}}>{this.props.text}</div>)}
}
復制代碼

我們有一個完全重寫的組件，加了2倍的代碼行，我們想要的只是一點狀態。你的代 碼 PR 校驗人會看到很多紅色和綠色的git修改明細。沒有人會喜歡圣誕主題的紅綠色Pull Request。

Hooks將會拯救你！

添加Hooks

當我們用React Hooks執行完全相同的操作時會發生什么：

    import React, {useState} from 'react';const ButtonWithHooks = props => {const [active, setActive] = useState(false); // ***return (<div className={active ? "active-button" : "default-button"} //*onClick={() => {setActive(!active); // ***props.onClick();}}>{props.text}</div>)};
復制代碼

這個組件，我們沒有重寫任何東西。我們做的就是添加了一點行數 并更新了 onCLick 函數，我們得到了與class版本相同的結果。我們的PR 查看者會開心，添加state只需下面這一行： const [active setActive] = useState(fasle);

重構

但是等等，為什么按鈕控制自己的狀態？我們改變下，我們想讓那個組件簡單讓我們看起來聰明。 我們讓 active 變成一個被父組件控制的prop。沒問題，用React Hooks 僅移處帶**的兩行 和 帶號的那一行的一部分。

如此簡單，但是class裝換成function會更復雜。

當你把組件裝換成函數時，你可能很受挫。查看你代碼的人又變成另外一個紅綠色。即使實際的變化很小你將會感到很沮喪。

總結

React Hooks 讓你的功能函數作為一個函數，并掛鉤到React 特定功能。這就是他，如此簡單如此強大。這是React Hooks的一些好處（大多數已經覆蓋到了，我只想分享我認為收益最明顯的地方）

1. 重寫不用移處或添加state，僅刪除、添加行
2. 用useEffects不用記生命周期方法
3. 不像class組件的state可自定義和跨組件重用。
4. 更干凈的代碼
5. 沒有重大變化

blog.usejournal.com/why-bother-…