超性感的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