爲何要使用React Hooks?(5分鐘實例)

時間 2019-12-06

標籤爲何使用 react hooks 5分實例欄目 React 简体版

原文原文鏈接

前言

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

Hooks是什麼?

React Hooks 就是讓你沒必要寫class組件就能夠用state和其餘的React特性；
你也能夠編寫本身的hooks在不一樣的組件之間複用；

最近不少人都在談論 React Hooks。當使用React類組件那麼久，使用React hooks須要一些觀念轉變。React官方團隊明確表示他們將會據需支持類組件，那爲何還要使用React Hooks呢？git

接下來是一個5分鐘的例子將你帶入hooks，讓咱們一塊兒瞭解吧。bash

例子

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

開始

咱們有一個簡單的按鈕組件，咱們想讓他變的簡單，因此寫了一個功能函數：ui

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

咱們能夠傳遞自定義的 onClick 事件和 text屬性。this

可是，若是咱們想要當按鈕激活改變其顏色要怎麼辦？假如，咱們已經有100個組件用了這個按鈕，咱們不想再加其餘屬性，顏色屬性讓按鈕本身控制也足夠簡單。spa

轉換到類

惟一的問題是咱們將會須要一些狀態。假設如今在hooks出現以前，咱們只能將其轉換成class，才能控制state。code

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。blog

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);