前端时间，接触了hooks，研究了一段时间后感觉使用起来十分方便，正好公司开了一个新的小项目，正好使用hooks来实践一下。
技术选型
1.为什么选择umi
在之前的文章中我也介绍过umi的优点，在使用过umi后，感觉自己的开发效率有很大的提升。umi的路由使用起来实在是让我爱不释手，详细的我就不过多介绍了，有兴趣的可以去看我之前的文章。
2.为什么选择TypeScript
TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。在使用TypeScript编程时，它能帮助你在写代码的过程中考虑到各种类型上的问题，避免代码运行时出现的意想不到的错误。使用了TypeScript可以增强你代码的健壮性，特别是大型项目的开发中，某些小小的改动都有可能对你的项目造成严重的后果。
3.为什么选择Dva
其实使用React Hooks的目的就是为了去redux，那我为什么还会使用基于redux-soga封装的dva呢？原因就在于hooks虽然很方便，但如果是一些很复杂的状态需要去管理，这时候使用hooks就会有点儿费劲了。所以这时候结合dva来解决这种特别复杂的状态管理是很方便的，原生的redux使用起来稍微有点儿麻烦，dva用起来很简单，很爽，这就是我选择dva的原因。
4.为什么选择React Hooks
这个是这篇文章的重点了，你在react开发过程中有没有遇见这三个问题。
（一） 在组件组件复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管我们可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。
（二） 复杂的组件变得难以理解
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。
（三） 难以理解的class
除了代码复用和代码管理会遇到困难外，class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。即便在有经验的 React 开发者之间，对于函数组件与 class 组件的差异也存在分歧，甚至还要区分两种组件的使用场景。
如果你也被这三种问题所困扰，这时候接触hooks，你会发现打开了新世界的大门。从面向对象编程转为函数式编程，我感觉释放了自己，写代码变得又爽又飞快。
项目搭建
因为使用了umi，所以该项目也是用umi来搭建的，具体方法可查看之前文章。选择ts版本，然后根据自己编程习惯，配置一下tslint规则就ok了。
这里要注意一件重要的事情，升级react和react-dom的版本为16.8.0以上，因为umi脚手架搭建的项目react版本为16.7.0，而16.8.0是react正式支持hook的版本。
Hooks使用
1.useState
首先我们来看一下官方的代码。
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}使用起来十分简单，函数式编程让你不用再继承Component，直接定义一个变量就行，可以给这个变量看做你之前写react中state的一个值。使用Hooks之后你不用再调用setState来更改state中的值，可以使用你自己定义的更改方法，上面代码中就是使用setCount来更改count的值，是不是很方便？
怎么在hooks中使用TypeScript？
如果你使用Component来编写你的组件，你需要通过interface来定义你state中值的类型，使用Hooks，你只需要这样：
const [count, setCount] = useState<number>(0)2.useEffect
Effect Hook 可以让你在函数组件中执行副作用操作，下面是官方代码。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}这段代码中使用了useEffect，可以让你在屏幕中显示你点击的次数。useEffect最大的好处我认为就是去生命周期钩子函数了，使用之后你不用再使用任何生命周期钩子函数，这一点来看是不是就特别爽？useEffect为什么会实现去生命周期钩子的作用呢？你可以在函数中写一个console.log，查看控制台后你便会发现控制台会一直打印你的console.log,所以useEffect会在组件的生命周期中一直被调用，我们在使用的时候可以告诉useEffect什么时候才会被调用来进行性能优化。比如上面代码我们可以这样修改：
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
},[count])这样修改后useEffect会在count的值发生改变后才被调用。
怎么清除在useEffect中调用的函数？
在开发过程中我们可能会使用到定时器，而异步队列中的定时器在组件被销毁后也会继续执行，这样便会造成内存泄漏，在Component中我们会调用componentWillUnmount函数来清除定时器，在useEffect中我们该怎么办呢？
import React, { useState, useEffect } from 'react'
import moment from 'moment'
export default function () {
const [nowTime, setNowTime] = useState(moment().format('YYYY年MM月DD日 ddd HH:mm'))
useEffect(() => {
const timer = setInterval(() => {
setNowTime(moment().format('YYYY年MM月DD日 ddd HH:mm:ss'))
}, 1000);
return () => {
clearInterval(timer);
}
},[nowTime])
return (
<>{nowTime}</>
)
}上面代码就是一段很简单的显示当前时间的代码，我们可以通过return函数在组件销毁的时候清除useEffect中的定时器
使用Hooks来编写一个表格组件
从后端获取数据，然后在表格中渲染应该是很常见的一个功能了，下面我们来看一下使用Hooks之后怎么写这种组件
import React, { useState, useEffect } from 'react'
import { Table } from 'antd'
export default function () {
const [tableData, setTableData] = useState<any[]>([])
const [page, setPage] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(15)
const [count, setCount] = useState<number>(0)
const [loading,setLoading] = useState<boolean>(true)
useEffect(() => {
fetch('www.baidu.com').then( function(data) {
if(data) {
setTableData(data.result)
setCount(data.count)
setLoading(false)
}
})
},[page,pageSize])
const onChangePage = (pageNumber: any) => setPage(pageNumber)
const onChangePageSize = (value: number) => setPageSize(value)
const columns = [
{
title: 'ID',
dataIndex: 'id'
},
{
title: '姓名',
dataIndex: 'name'
},
{
title: '电话',
dataIndex: 'tel',
},
{
title: '性别',
dataIndex: 'gender',
},
{
title: '年龄',
dataIndex: 'age',
},
]
return (
<>
<Table
bordered={false}
rowKey={(r, i) => (i + '')}
columns={columns}
loading={loading}
dataSource={tableData.length ? tableData : []}
pagination={false}
style={{ marginTop: 10 }}
size="small"
/>
<Row>
<Col span={8}>
<span>搜索到{props.count}条数据</span>
<span style={{ margin: '0 20px' }}>共{Math.ceil(count / pageSize)}页</span>
<Select defaultValue={15} onChange={onChangePageSize}>
<Option value={10}>10条/页</Option>
<Option value={15}>15条/页</Option>
<Option value={20}>20条/页</Option>
<Option value={30}>30条/页</Option>
</Select>
</Col>
<Col span={14} push={2} style={{display:'flex', justifyContent:'flex-end', marginRight: 10}}>
<Pagination
showQuickJumper={true}
current={page}
pageSize={pageSize}
total={count}
onChange={onChangePage}
/>
</Col>
</Row>
</>
)
}这样就写完一个功能完善的表格组件了，回想一下你之前是用Component面向对象编程时怎么写的，再看一下用Hooks函数式编程的代码是不是简单很多？赶紧来试试hooks吧，会让你有写代码停不下来的感觉。
