前言
React Hooks在React v16.8正式穩定版中加入。
Hooks是什麼?
- React Hooks 就是讓你不必寫class組件就可以用state和其他的React特性;
- 你也可以編寫自己的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的一些好處(大多數已經覆蓋到了,我只想分享我認爲收益最明顯的地方)
- 重寫不用移處或添加state,僅刪除、添加行
- 用useEffects不用記生命週期方法
- 不像class組件的state可自定義和跨組件重用。
- 更乾淨的代碼
- 沒有重大變化
轉載於:https://juejin.im/post/5cfdba4be51d4577596486d1