超性感的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给个人感受，无疑是幸福大于痛苦的。

1、肉眼可见的简洁

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

左侧的代码，是学习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>
  ]
}
复制代码

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

2、上手更简单

当一个团队选择了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再也不是必须品。咱们可以经过其余方式管理组件状态。

3、超棒的开发体验

和class语法相比，函数组件一直都更受欢迎。可是之前函数组件没法维护本身的状态，所以在不少时候不得不选择class来实现目的。

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

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

4、与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等前端框架发表其余发表任何意见和见解。若是有忘乎所以，吹嘘过分之处，请勿往这方面思考 ~

本系列文章的全部案例，均可以在下面的地址中查看

github.com/advance-cou…

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