专栏首页不知非攻超性感的React Hooks(一):为何她独具魅力

超性感的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[1]。现在想想真的有点点搞笑。

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

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

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

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

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

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

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

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

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

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

特别是自学的同学,很可能会因为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

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

References

[1] 所以还在写文章劝大家学习angular: https://juejin.im/post/57863fc27db2a200630b2312 [2] Redux中文文档: https://www.redux.org.cn/

本文分享自微信公众号 - 不知非攻(keepKilling),作者:这波能反杀丶

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么要选择React

    无意比较几大框架的优劣,但是要入手一门框架,对于刚学习的同学而言,学谁的价值最高?是一个绕不开的问题。

    用户6901603
  • 一、环境搭建、以及聊聊更重要的...

    它给我们提供了一个开发思路以及少量的API,这些API学习起来还算轻松。不过在阅读此系列文章之前,应该有不少读者已经通过官方文档或者其他途径开始尝试学习Reac...

    用户6901603
  • 十一、详解面向对象

    如果要我总结一下学习前端以来我遇到了哪些瓶颈,那么面向对象一定是第一个会想到的。尽管现在对于面向对象有了一些的了解,但是当初那种似懂非懂的痛苦,依然历历在目。

    用户6901603
  • 2020年值得你去试试的10个React开发工具

    JavaScript每天都在出现大量的框架和工具,而React是除了上次我们提到的Vue和Ember之外另一款比较流行的框架。但因为新的工具每天都在不断的出现,...

    葡萄城控件
  • React Native 的未来与React Hooks

    近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想...

    恋猫
  • 深入浅出React(一):React的设计哲学 - 简单之美

    编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不...

    IMWeb前端团队
  • 深入浅出React(一):React的设计哲学 - 简单之美

    本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

    IMWeb前端团队
  • React 17 要来了,非常特别的一版

    React 最近发布了v17.0.0-rc.0,距上一个大版本v16.0(发布于 2017/9/27)已经过去近 3 年了

    ayqy贾杰
  • React性能测量和分析

    上一篇文章讲了 React 性能优化的一些方向和手段,这篇文章再补充说一下如何进行性能测量和分析, 介绍 React 性能分析的一些工具和方法.

    _sx_
  • 前端三大框架比较Angularreactvue

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券