为何要使用React Hooks?(5分钟实例)

前言

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-…