为什么要使用React Hooks?(5分钟实例)-白红宇

前言

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 (        
    
                 {props.text}        
    
    )}复制代码

我们可以传递自定义的 onClick 事件和 text属性。

但是，如果我们想要当按钮激活改变其颜色要怎么办？假如，我们已经有100个组件用了这个按钮，我们不想再加其他属性，颜色属性让按钮自己控制也足够简单。

转换到类

唯一的问题是我们将会需要一些状态。假设现在在hooks出现之前，我们只能将其转换成class，才能控制state。

class ButtonWithClass extends React.Component {    state = {        active: false    };        render() {        return (            
    
                     onClick={() => {                     this.setState({active: !this.state.active}); this.props.onClick();                }}            >                {this.props.text}            
    
        )    }}复制代码

我们有一个完全重写的组件，加了2倍的代码行，我们想要的只是一点状态。你的代码 PR 校验人会看到很多红色和绿色的git修改明细。没有人会喜欢圣诞主题的红绿色Pull Request。

Hooks将会拯救你！

添加Hooks

当我们用React Hooks执行完全相同的操作时会发生什么：

import React, {useState} from 'react';        const ButtonWithHooks = props => {      const [active, setActive] = useState(false); // ***            return (        
    
      {            setActive(!active); // ***            props.onClick();          }}        >          {props.text}        
    
      )    };复制代码

这个组件，我们没有重写任何东西。我们做的就是添加了一点行数并更新了 onCLick 函数，我们得到了与class版本相同的结果。我们的PR 查看者会开心，添加state只需下面这一行： const [active setActive] = useState(fasle);

重构

但是等等，为什么按钮控制自己的状态？我们改变下，我们想让那个组件简单让我们看起来聪明。我们让 active 变成一个被父组件控制的prop。没问题，用React Hooks 仅移处带**的两行和带号的那一行的一部分。

如此简单，但是class装换成function会更复杂。

当你把组件装换成函数时，你可能很受挫。查看你代码的人又变成另外一个红绿色。即使实际的变化很小你将会感到很沮丧。

总结

React Hooks 让你的功能函数作为一个函数，并挂钩到React 特定功能。这就是他，如此简单如此强大。这是React Hooks的一些好处（大多数已经覆盖到了，我只想分享我认为收益最明显的地方）

重写不用移处或添加state，仅删除、添加行

用useEffects不用记生命周期方法

不像class组件的state可自定义和跨组件重用。

更干净的代码

没有重大变化