超性感的React Hooks（一）：为何她独具魅力

正如标题所示，我准备写一系列文章介绍React Hooks。

过去大半年里，我将React Hooks应用到了许多大型项目，其中5个全新重构，其他项目由于时间关系少量使用。

这些项目包括

• React Native
• 基于ant-design-pro重构的中后台应用
• 基于React，专注于小程序开发的Taro应用
• 以create-react-app为基础，自主构建的web应用
• 基于beidou框架的改造的同构应用等

截止目前为止，其中一个项目useState使用2053次。

在大量使用了React Hooks之后，我有很多东西想要跟大家分享，也算是对自己这一年的成长做一个总结。

网上有大量的文章能够教会大家如何使用React hooks，但很少有文章能够指引我们如何用好。而这，也是我这次总结的目的所在。

这系列文章将不仅仅只是简单的介绍React Hooks相关的api，也不会为了逼格而过于深入源码，我会专注于实践应用，恰到好处的把该说的东西说得通俗易懂。也算是自己对知识是否掌握牢固的一次有效检验。

文章会有很多篇，只能利用空余时间写，可能要一个多月甚至更久才能写完，希望感兴趣的同学能有点耐心，文章会优先在我的公众号不知非攻中发布。本文就先总结一下为什么React Hooks值得入手，并且万万不能错过。

阅读本系列文章，需要有相对扎实的JS基础，并且对React有简单的了解。如果你觉得自己还不具备这样的条件，没关系，关注我的公众号，我之前写的基础进阶系列文章必定能够帮助大家夯实基础。

这系列文章虽然主要是分析React hooks，但是也可以作为React的入门教程，我会尽量通俗易懂。

React Hooks是React的一次成功自我颠覆。

这是我大量使用React Hooks之后的真实感受。

React团队随时都在想着如何颠覆自己。对于主攻React的童鞋来说，真的是幸福又痛苦。

而React Hooks给我的感觉，无疑是幸福大于痛苦的。

一、肉眼可见的简洁

先用一张图简单对比一下：

左侧的代码，是学习React入门的经典demo。
右侧的代码，则是使用新的方式实现同样的功能。

当然，简洁力度有限，还不够震撼，说服力不够强。
再来一个例子。

基于上面的简单计数组件，强行套一个受控组件的思维，下图是实现对比图。

代码行数，整整少了几乎一半。

import React, { useState, useEffect } from 'react';

interface Props {
  value: number,
  onChange: (num: number) => any
}

export default function Counter({ value, onChange }: Props) {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    value && setCount(value);
  }, [value]);

  return [
    <div key="a">{count}</div>,
    <button key="b" onClick={() => onChange(count + 1)}>
      点击+1
    </button>
  ]
}

我想，所有人都知道，代码少一半，意味着什么！

二、上手更简单

当一个团队选择了React作为主要的技术栈，面临的一个大的问题，就是招人相对困难<至少成都是这样>，这一点，我深有体会，10个投来的简历，9个都是会vue的，还有一个会React的，都是骗人的，2年时间，我愣是没有招到一个会React的人。大概，大家都觉得vue更好学吧。

我找了一篇很久以前的文章，记录了自己初学React时的感受。

当时觉得React学习难，一度认为自己无法掌握好，所以还在写文章劝大家学习angular。现在想想真的有点点搞笑。

对初学者来说，React上手其实并不容易，那难在哪里呢？以我自己的经验总结一下：

生命周期难以理解，更难熟练运用

我们能够相对容易的把生命周期记忆下来，但是运用到实践里却是另外一回事。几个运行时的生命周期理解起来更是不易。而如何做性能优化，这些生命周期又是重中之重。如果不小心，你写的代码甚至可能让程序翻车。

能够正确理解生命周期并熟练运用，是React开发者成为高手的必备条件。

可这，也是我们前进路上的第一条拦路虎。

成熟靠谱的组件化思维，形成困难

即使是拥有多年开发经验的大佬，有可能组件化思维这一项也不过关。糟糕的组件划分带来的就是难以维护的糟糕代码。

当然这不仅仅限制于React，所有的组件化思维框架，都会有同样的挑战。组件化思维非常重要，他是最底层的思维核心。更良好的组件化思维，写出来的代码必定更优雅，可维护性更高。反之，可能就是灾难。

最火的状态管理解决方案 Redux，概念多， 难以理解

Redux的思维非常优秀，可实际理解起来并不简单。
再加上许多人学习Redux时，都是通过 Redux中文文档，我认为它加深了学习的难度，学完之后反而懵逼！

特别是自学的同学，很可能会因为redux，而将React拒之门外。

高阶组件理解起来不容易

React Hooks出来之前，高阶组件是无论如何也必须要掌握好的知识点。

然而许多同学基础知识不扎实，高阶函数没有搞明白，面向对象也有点小问题，在学习高阶组件时自然也是似懂非懂。

// 传入基础组件作为参数
const withRouter = (Component) => {

  // 创建中间组件
  const C = (props) => {
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <Route render={routeComponentProps => (
        // wrappedComponentRef 用来解决高阶组件无法正确获取到ref的问题
        <Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef} />
      )} />
    )
  }

  C.displayName = `withRouter(${Component.displayName || Component.name})`;
  C.WrappedComponent = Component;
  C.propTypes = {
    wrappedComponentRef: PropTypes.func
  }

  // hoistStatics类似于Object.assign，用于解决基础组件因为高阶组件的包裹而丢失静态方法的问题
  return hoistStatics(C, Component);
}

export default withRouter;

优秀的解决方案都在社区，许多人用React很长一段时间都无法知晓

React本身其实非常简单，可是围绕React的一系列解决方案，却没有途径告知大家。学完了React，但不一定知道如何使用React实现一个走马灯，也可能不知道使用React如何实现一个日历。

比较热门的Redux，React-router等，都不算是React的官方解决方案。更多的方案例如 redux chunk，redux saga等等，很多React学习者都不知道有这些东西。在这种情况下，学习成本就变相增加很多。

和以前相比，React hooks的出现让React的学习成本降低了很多。具体体现为：

1. 生命周期可以不用学。react hooks使用全新的理念来管理组件的运作过程。
2. 高阶组件不用学。React hooks能够完美解决高阶组件想要解决的问题，并且更靠谱。
3. redux不再是必须品。我们能够通过其他方式管理组件状态。

三、超棒的开发体验

和class语法相比，函数组件一直都更受欢迎。但是以前函数组件无法维护自己的状态，因此在很多时候不得不选择class来实现目的。

React Hooks 让函数组件维护内部状态成为了可能。

在我看来，React Hooks，是能够最快实现心中所想的开发方式。

四、与Typescript结合更简单

我们几乎不用关注React hooks组件与typescript如何结合使用。这是class组件不具备的优点。

群里的许多朋友在学习typescript时，常常会非常困惑，如何将typescript应用与React中？这样的问题在高阶组件时疑惑可能更大。相信吃过这个苦的同学都深有体会。

即使知道如何解决，也并不是那么简单。例如我们试图使用ts清晰的描述Demo组件props传入的数据类型，不得不定义额外的interface。

import React from 'react';
import { connect } from 'net';

interface ConnectProps {
  dispatch: any,
  history: any
}

interface DemoProps {
  name: string,
  age: number
}

interface InjectedProps extends DemoProps, ConnectProps {}

@connect
export default class Demo() {
  get injected() {
    return this.props as 
  }
  render() {
    return (
      <div>hello, world.</div>
    )
  } 
}

React Hooks组件作为函数组件，几乎不会有这样的烦恼。他就和普通函数一样，没有新增额外的负担。

总的来说，React Hooks是React开发体验的一次全面提升，也是一次效率的革命。如果你正在使用React，却还没有用上React Hooks，我敢保证，对你而言，这是一次遗憾。

本着不装逼不引战的原则，本系列文章主观上不针对vue/angular等前端框架发表其他发表任何意见和看法。如果有得意忘形，吹嘘过度之处，请勿往这方面思考 ~

本系列文章的所有案例，都可以在下面的地址中查看

https://github.com/advance-course/react-hooks

本系列文章为原创，请勿私自转载，转载请务必私信我

关于如何学好JavaScript，我写了一本书，感兴趣的同学可点击阅读原文查看详情。