阅读 1124

超性感的React Hooks(一):为何她独具魅力

React Hooks

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

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

这些项目包括

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

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

截止目前为止,其中一个项目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。 右侧的代码,则是使用新的方式实现同样的功能。

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

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

左边:Class 右边:Hooks

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

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 超难

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

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

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

早期的生命周期

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

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

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

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

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

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

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

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等前端框架发表其他发表任何意见和看法。如果有得意忘形,吹嘘过度之处,请勿往这方面思考 ~

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

github.com/advance-cou…

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

关注下面的标签,发现更多相似文章
评论