摘要：为什么选择是开发和维护的一种面向对象的编程语言。一在组件组件复用状态逻辑很难没有提供将可复用性行为附加到组件的途径例如，把组件连接到。如此很容易产生，并且导致逻辑不一致。同时，这也是很多人将与状态管理库结合使用的原因之一。
前端时间，接触了hooks，研究了一段时间后感觉使用起来十分方便，正好公司开了一个新的小项目，正好使用hooks来实践一下。
技术选型 1.为什么选择umi在之前的文章中我也介绍过umi的优点，在使用过umi后，感觉自己的开发效率有很大的提升。umi的路由使用起来实在是让我爱不释手，详细的我就不过多介绍了，有兴趣的可以去看我之前的文章。
2.为什么选择TypeScriptTypeScript 是 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的版本。
首先我们来看一下官方的代码。
import React, { useState } from "react";
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
使用起来十分简单，函数式编程让你不用再继承Component，直接定义一个变量就行，可以给这个变量看做你之前写react中state的一个值。使用Hooks之后你不用再调用setState来更改state中的值，可以使用你自己定义的更改方法，上面代码中就是使用setCount来更改count的值，是不是很方便？
怎么在hooks中使用TypeScript？
如果你使用Component来编写你的组件，你需要通过interface来定义你state中值的类型，使用Hooks，你只需要这样：
const [count, setCount] = useState2.useEffect(0)
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 (
You clicked {count} times
);
}
这段代码中使用了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日 ffffd HH:mm"))
useEffect(() => {
const timer = setInterval(() => {
setNowTime(moment().format("YYYY年MM月DD日 ffffd 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([])
const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(15)
const [count, setCount] = useState(0)
const [loading,setLoading] = useState(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 (
<>
(i + "")}
columns={columns}
loading={loading}
dataSource={tableData.length ? tableData : []}
pagination={false}
style={{ marginTop: 10 }}
size="small"
/>
)
}
这样就写完一个功能完善的表格组件了，回想一下你之前是用Component面向对象编程时怎么写的，再看一下用Hooks函数式编程的代码是不是简单很多？赶紧来试试hooks吧，会让你有写代码停不下来的感觉。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104436.html
相关文章
-
UMI.js使用方法
摘要：或者在中导入样式文件存放全局通用请求存放通用方法这是时生产的临时目录，默认包含和，有些插件也会在这里生成一些其他临时文件。项目中常用于发送请求，等待服务端响应数据。如果使用的装饰器则为
umi.js使用方法
node环境安装
在官网下载与系统相应的node版本，node.js版本>=8.10
编辑器
推荐使用Visual Studio Code 安装方法
安装umi
npm insta...
-
Umi.js
摘要：，中文可发音为乌米，是一个可插拔的企业级应用框架。以路由为基础的，支持类的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。全局存于目录，所有页面都可引用页面不能被其他页面所引用。
umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展...
-
新上课程推荐：《React Hooks 案例详解（React 进阶必备）》
摘要：课程制作和案例制作都经过精心编排。对于开发者意义重大，希望对有需要的开发者有所帮助。是从提案转为正式加入的新特性。并不需要用继承，而是推荐用嵌套。大型项目中模块化与功能解耦困难。从而更加易于复用和独立测试。但使用会减少这种几率。
showImg(https://segmentfault.com/img/bVbpNRZ?w=1920&h=1080);
讲师简介
曾任职中软军队事业部，参与...
-
可能是基于 Hooks 和 Typescript 最好的状态管理工具
摘要：接上一篇我理想中的状态管理工具之前说，对于我个人来而言，理想的状态管理工具只需同时满足两个特点简单易用，并且适合中大型项目完美地支持未能找到一个完美满足这两点的，所以我决定自己造了一个叫。把分为和两类是很好的实践。
接上一篇：我理想中的状态管理工具
之前说，对于我个人来而言，理想的状态管理工具只需同时满足两个特点：
简单易用，并且适合中大型项目
完美地支持 Typescript
未...
-
平时积累的前端资源，持续更新中。。。
本文收集学习过程中使用到的资源。
持续更新中……
项目地址
https://github.com/abc-club/f...
目录
vue
react
react-native
Weex
typescript
Taro
nodejs
常用库
css
js
es6
移动端
微信公众号
小程序
webpack
GraphQL
性能与监控
高质文章
趋势
动效
数据结构与算法
js core
代码规范...
发表评论
0条评论
stonezhu
男|高级讲师
TA的文章
阅读更多
Spring Cloud Gateway限流实战
阅读 1228·2021-11-23 09:51
nginx配置中开启gzip来压缩网页文件提高网站速度
阅读 2591·2021-09-03 10:47
【CSS篇】inline block和block的区别
阅读 2194·2019-08-30 15:53
移动端UI设计规范指南
阅读 2393·2019-08-30 15:44
前端面试每日 3+1 —— 第134天
阅读 1356·2019-08-30 15:44
重学前端学习笔记（二十）--try里面放return，finally还会执行吗？
阅读 1172·2019-08-30 10:57
margin详解
阅读 1899·2019-08-29 12:25
JavaScript之Range--或许会有点用
阅读 1061·2019-08-26 11:57
最新活动
阅读需要支付1元查看
