正如标题所示，我准备写一系列文章介绍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。右侧的代码，则是使用新的方式实现同样的功能。
当然，简洁力度有限，还不够震撼，说服力不够强。再来一个例子。
基于上面的简单计数组件，强行套一个受控组件的思维，下图是实现对比图。
代码行数，整整少了几乎一半。
代码语言：javascript复制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出来之前，高阶组件是无论如何也必须要掌握好的知识点。
然而许多同学基础知识不扎实，高阶函数没有搞明白，面向对象也有点小问题，在学习高阶组件时自然也是似懂非懂。
代码语言：javascript复制// 传入基础组件作为参数
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。
代码语言：javascript复制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/
