資訊專欄INFORMATION COLUMN
摘要：為什么選擇是開發和維護的一種面向對象的編程語言。一在組件組件復用狀態邏輯很難沒有提供將可復用性行為附加到組件的途徑例如，把組件連接到。如此很容易產生，并且導致邏輯不一致。同時，這也是很多人將與狀態管理庫結合使用的原因之一。
前端時間，接觸了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吧，會讓你有寫代碼停不下來的感覺。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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限流實戰
閱讀 1263·2021-11-23 09:51
nginx配置中開啟gzip來壓縮網頁文件提高網站速度
閱讀 2638·2021-09-03 10:47
【CSS篇】inline block和block的區別
閱讀 2234·2019-08-30 15:53
移動端UI設計規范指南
閱讀 2414·2019-08-30 15:44
前端面試每日 3+1 —— 第134天
閱讀 1375·2019-08-30 15:44
重學前端學習筆記（二十）--try里面放return，finally還會執行嗎？
閱讀 1194·2019-08-30 10:57
margin詳解
閱讀 1924·2019-08-29 12:25
JavaScript之Range--或許會有點用
閱讀 1087·2019-08-26 11:57
最新活動
閱讀需要支付1元查看
