資訊專欄INFORMATION COLUMN
摘要：為什么選擇是開發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z言。一在組件組件復(fù)用狀態(tài)邏輯很難沒有提供將可復(fù)用性行為附加到組件的途徑例如，把組件連接到。如此很容易產(chǎn)生，并且導(dǎo)致邏輯不一致。同時(shí)，這也是很多人將與狀態(tài)管理庫結(jié)合使用的原因之一。
前端時(shí)間，接觸了hooks，研究了一段時(shí)間后感覺使用起來十分方便，正好公司開了一個(gè)新的小項(xiàng)目，正好使用hooks來實(shí)踐一下。
技術(shù)選型 1.為什么選擇umi在之前的文章中我也介紹過umi的優(yōu)點(diǎn)，在使用過umi后，感覺自己的開發(fā)效率有很大的提升。umi的路由使用起來實(shí)在是讓我愛不釋手，詳細(xì)的我就不過多介紹了，有興趣的可以去看我之前的文章。
2.為什么選擇TypeScriptTypeScript 是 Microsoft 開發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以載入 JavaScript 代碼運(yùn)行，并擴(kuò)展了 JavaScript 的語法。在使用TypeScript編程時(shí)，它能幫助你在寫代碼的過程中考慮到各種類型上的問題，避免代碼運(yùn)行時(shí)出現(xiàn)的意想不到的錯(cuò)誤。使用了TypeScript可以增強(qiáng)你代碼的健壯性，特別是大型項(xiàng)目的開發(fā)中，某些小小的改動(dòng)都有可能對(duì)你的項(xiàng)目造成嚴(yán)重的后果。
3.為什么選擇Dva其實(shí)使用React Hooks的目的就是為了去redux，那我為什么還會(huì)使用基于redux-soga封裝的dva呢？原因就在于hooks雖然很方便，但如果是一些很復(fù)雜的狀態(tài)需要去管理，這時(shí)候使用hooks就會(huì)有點(diǎn)兒費(fèi)勁了。所以這時(shí)候結(jié)合dva來解決這種特別復(fù)雜的狀態(tài)管理是很方便的，原生的redux使用起來稍微有點(diǎn)兒麻煩，dva用起來很簡(jiǎn)單，很爽，這就是我選擇dva的原因。
4.為什么選擇React Hooks這個(gè)是這篇文章的重點(diǎn)了，你在react開發(fā)過程中有沒有遇見這三個(gè)問題。
（一） 在組件組件復(fù)用狀態(tài)邏輯很難
React 沒有提供將可復(fù)用性行為“附加”到組件的途徑（例如，把組件連接到 store）。如果你使用過 React 一段時(shí)間，你也許會(huì)熟悉一些解決此類問題的方案，比如 render props 和 高階組件。但是這類方案需要重新組織你的組件結(jié)構(gòu)，這可能會(huì)很麻煩，使你的代碼難以理解。如果你在 React DevTools 中觀察過 React 應(yīng)用，你會(huì)發(fā)現(xiàn)由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會(huì)形成“嵌套地獄”。盡管我們可以在 DevTools 過濾掉它們，但這說明了一個(gè)更深層次的問題：React 需要為共享狀態(tài)邏輯提供更好的原生途徑。
（二） 復(fù)雜的組件變得難以理解
我們經(jīng)常維護(hù)一些組件，組件起初很簡(jiǎn)單，但是逐漸會(huì)被狀態(tài)邏輯和副作用充斥。每個(gè)生命周期常常包含一些不相關(guān)的邏輯。例如，組件常常在 componentDidMount 和 componentDidUpdate 中獲取數(shù)據(jù)。但是，同一個(gè) componentDidMount 中可能也包含很多其它的邏輯，如設(shè)置事件監(jiān)聽，而之后需在 componentWillUnmount 中清除。相互關(guān)聯(lián)且需要對(duì)照修改的代碼被進(jìn)行了拆分，而完全不相關(guān)的代碼卻在同一個(gè)方法中組合在一起。如此很容易產(chǎn)生 bug，并且導(dǎo)致邏輯不一致。在多數(shù)情況下，不可能將組件拆分為更小的粒度，因?yàn)闋顟B(tài)邏輯無處不在。這也給測(cè)試帶來了一定挑戰(zhàn)。同時(shí)，這也是很多人將 React 與狀態(tài)管理庫結(jié)合使用的原因之一。但是，這往往會(huì)引入了很多抽象概念，需要你在不同的文件之間來回切換，使得復(fù)用變得更加困難。
（三） 難以理解的class
除了代碼復(fù)用和代碼管理會(huì)遇到困難外，class 是學(xué)習(xí) React 的一大屏障。你必須去理解 JavaScript 中 this 的工作方式，這與其他語言存在巨大差異。還不能忘記綁定事件處理器。沒有穩(wěn)定的語法提案，這些代碼非常冗余。大家可以很好地理解 props，state 和自頂向下的數(shù)據(jù)流，但對(duì) class 卻一籌莫展。即便在有經(jīng)驗(yàn)的 React 開發(fā)者之間，對(duì)于函數(shù)組件與 class 組件的差異也存在分歧，甚至還要區(qū)分兩種組件的使用場(chǎng)景。
如果你也被這三種問題所困擾，這時(shí)候接觸hooks，你會(huì)發(fā)現(xiàn)打開了新世界的大門。從面向?qū)ο缶幊剔D(zhuǎn)為函數(shù)式編程，我感覺釋放了自己，寫代碼變得又爽又飛快。
項(xiàng)目搭建因?yàn)槭褂昧藆mi，所以該項(xiàng)目也是用umi來搭建的，具體方法可查看之前文章。選擇ts版本，然后根據(jù)自己編程習(xí)慣，配置一下tslint規(guī)則就ok了。
這里要注意一件重要的事情，升級(jí)react和react-dom的版本為16.8.0以上，因?yàn)閡mi腳手架搭建的項(xiàng)目react版本為16.7.0，而16.8.0是react正式支持hook的版本。
首先我們來看一下官方的代碼。
import React, { useState } from "react";
function Example() {
// 聲明一個(gè)新的叫做 “count” 的 state 變量
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
使用起來十分簡(jiǎn)單，函數(shù)式編程讓你不用再繼承Component，直接定義一個(gè)變量就行，可以給這個(gè)變量看做你之前寫react中state的一個(gè)值。使用Hooks之后你不用再調(diào)用setState來更改state中的值，可以使用你自己定義的更改方法，上面代碼中就是使用setCount來更改count的值，是不是很方便？
怎么在hooks中使用TypeScript？
如果你使用Component來編寫你的組件，你需要通過interface來定義你state中值的類型，使用Hooks，你只需要這樣：
const [count, setCount] = useState2.useEffect(0)
Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作，下面是官方代碼。
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，可以讓你在屏幕中顯示你點(diǎn)擊的次數(shù)。useEffect最大的好處我認(rèn)為就是去生命周期鉤子函數(shù)了，使用之后你不用再使用任何生命周期鉤子函數(shù)，這一點(diǎn)來看是不是就特別爽？useEffect為什么會(huì)實(shí)現(xiàn)去生命周期鉤子的作用呢？你可以在函數(shù)中寫一個(gè)console.log，查看控制臺(tái)后你便會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)一直打印你的console.log,所以u(píng)seEffect會(huì)在組件的生命周期中一直被調(diào)用，我們?cè)谑褂玫臅r(shí)候可以告訴useEffect什么時(shí)候才會(huì)被調(diào)用來進(jìn)行性能優(yōu)化。比如上面代碼我們可以這樣修改：
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
},[count])
這樣修改后useEffect會(huì)在count的值發(fā)生改變后才被調(diào)用。
怎么清除在useEffect中調(diào)用的函數(shù)？在開發(fā)過程中我們可能會(huì)使用到定時(shí)器，而異步隊(duì)列中的定時(shí)器在組件被銷毀后也會(huì)繼續(xù)執(zhí)行，這樣便會(huì)造成內(nèi)存泄漏，在Component中我們會(huì)調(diào)用componentWillUnmount函數(shù)來清除定時(shí)器，在useEffect中我們?cè)撛趺崔k呢？
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}
)
}
上面代碼就是一段很簡(jiǎn)單的顯示當(dāng)前時(shí)間的代碼，我們可以通過return函數(shù)在組件銷毀的時(shí)候清除useEffect中的定時(shí)器
使用Hooks來編寫一個(gè)表格組件從后端獲取數(shù)據(jù)，然后在表格中渲染應(yīng)該是很常見的一個(gè)功能了，下面我們來看一下使用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"
/>
)
}
這樣就寫完一個(gè)功能完善的表格組件了，回想一下你之前是用Component面向?qū)ο缶幊虝r(shí)怎么寫的，再看一下用Hooks函數(shù)式編程的代碼是不是簡(jiǎn)單很多？趕緊來試試hooks吧，會(huì)讓你有寫代碼停不下來的感覺。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104436.html
相關(guān)文章
-
UMI.js使用方法
摘要：或者在中導(dǎo)入樣式文件存放全局通用請(qǐng)求存放通用方法這是時(shí)生產(chǎn)的臨時(shí)目錄，默認(rèn)包含和，有些插件也會(huì)在這里生成一些其他臨時(shí)文件。項(xiàng)目中常用于發(fā)送請(qǐng)求，等待服務(wù)端響應(yīng)數(shù)據(jù)。如果使用的裝飾器則為
umi.js使用方法
node環(huán)境安裝
在官網(wǎng)下載與系統(tǒng)相應(yīng)的node版本，node.js版本>=8.10
編輯器
推薦使用Visual Studio Code 安裝方法
安裝umi
npm insta...
-
Umi.js
摘要：，中文可發(fā)音為烏米，是一個(gè)可插拔的企業(yè)級(jí)應(yīng)用框架。以路由為基礎(chǔ)的，支持類的約定式路由，以及各種進(jìn)階的路由功能，并以此進(jìn)行功能擴(kuò)展，比如支持路由級(jí)的按需加載。全局存于目錄，所有頁面都可引用頁面不能被其他頁面所引用。
umi，中文可發(fā)音為烏米，是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架。umi 以路由為基礎(chǔ)的，支持類 next.js 的約定式路由，以及各種進(jìn)階的路由功能，并以此進(jìn)行功能擴(kuò)展...
-
新上課程推薦：《React Hooks 案例詳解（React 進(jìn)階必備）》
摘要：課程制作和案例制作都經(jīng)過精心編排。對(duì)于開發(fā)者意義重大，希望對(duì)有需要的開發(fā)者有所幫助。是從提案轉(zhuǎn)為正式加入的新特性。并不需要用繼承，而是推薦用嵌套。大型項(xiàng)目中模塊化與功能解耦困難。從而更加易于復(fù)用和獨(dú)立測(cè)試。但使用會(huì)減少這種幾率。
showImg(https://segmentfault.com/img/bVbpNRZ?w=1920&h=1080);
講師簡(jiǎn)介
曾任職中軟軍隊(duì)事業(yè)部，參與...
-
可能是基于 Hooks 和 Typescript 最好的狀態(tài)管理工具
摘要：接上一篇我理想中的狀態(tài)管理工具之前說，對(duì)于我個(gè)人來而言，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)簡(jiǎn)單易用，并且適合中大型項(xiàng)目完美地支持未能找到一個(gè)完美滿足這兩點(diǎn)的，所以我決定自己造了一個(gè)叫。把分為和兩類是很好的實(shí)踐。
接上一篇：我理想中的狀態(tài)管理工具
之前說，對(duì)于我個(gè)人來而言，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)：
簡(jiǎn)單易用，并且適合中大型項(xiàng)目
完美地支持 Typescript
未...
-
平時(shí)積累的前端資源，持續(xù)更新中。。。
本文收集學(xué)習(xí)過程中使用到的資源。
持續(xù)更新中……
項(xiàng)目地址
https://github.com/abc-club/f...
目錄
vue
react
react-native
Weex
typescript
Taro
nodejs
常用庫
css
js
es6
移動(dòng)端
微信公眾號(hào)
小程序
webpack
GraphQL
性能與監(jiān)控
高質(zhì)文章
趨勢(shì)
動(dòng)效
數(shù)據(jù)結(jié)構(gòu)與算法
js core
代碼規(guī)范...
發(fā)表評(píng)論
0條評(píng)論
stonezhu
男|高級(jí)講師
TA的文章
閱讀更多
Spring Cloud Gateway限流實(shí)戰(zhàn)
閱讀 1272·2021-11-23 09:51
nginx配置中開啟gzip來壓縮網(wǎng)頁文件提高網(wǎng)站速度
閱讀 2662·2021-09-03 10:47
【CSS篇】inline block和block的區(qū)別
閱讀 2244·2019-08-30 15:53
移動(dòng)端UI設(shè)計(jì)規(guī)范指南
閱讀 2430·2019-08-30 15:44
前端面試每日 3+1 —— 第134天
閱讀 1383·2019-08-30 15:44
重學(xué)前端學(xué)習(xí)筆記（二十）--try里面放return，finally還會(huì)執(zhí)行嗎？
閱讀 1206·2019-08-30 10:57
margin詳解
閱讀 1936·2019-08-29 12:25
JavaScript之Range--或許會(huì)有點(diǎn)用
閱讀 1098·2019-08-26 11:57
最新活動(dòng)
閱讀需要支付1元查看
