記錄一次完整的react hooks實(shí)踐
寫在前面
React在16.8版本正式發(fā)布了Hooks。關(guān)注了很久,最近正好有一個小需求,趕緊來試一下。
需求描述
需求很簡單,部門內(nèi)部的一個數(shù)據(jù)查詢小工具。大致長成下面這樣:
用戶首次訪問頁面,會拉取數(shù)據(jù)展示。輸入篩選條件,點(diǎn)擊查詢后,會再次拉取數(shù)據(jù)在前端展示。
需求實(shí)現(xiàn)
使用React Class Component的寫法
如果使用以前的class寫法,簡單寫一下,代碼可能大概長成下面這樣:
import React from 'react'; import { Tabs, Input, RangeTime, Button, Table } from './components'; class App extends React.Component { ... state = { type: [], id: '', title: '', date: [], dataList: [] } componentDidMount() { this.fetchData(); } render() { <Tabs value={this.state.type} onChange={this.handleTypeChange}/> <Input value={this.state.id} label="ID" onChange={this.handleIdChange}/> <Input value={this.state.id} label="標(biāo)題" onChange={this.handleTitleChange}/> <RangeTime value={this.state.date} onChange={this.handleRangeTimeChange}/> <Button onClick={this.handleQueryBtnClick}>查詢</Button> <Table dataList={this.state.dataList} /> } fetchData() { ... this.setState({ dataList }); } handleTypeChange() { ... this.setState({ type, }); } handleIdChange() { ... this.setState({ id, }); } handleTitleChange() { ... this.setState({ title, }); } handleRangeTimeChange() { ... this.setState({ date, }); } handleQueryBtnClick() { ... } ... }
使用React Hooks的寫法
關(guān)于React hooks的相關(guān)內(nèi)容,這里就不贅述了??梢灾苯硬榭磖eact官方文檔,寫得非常好。
https://reactjs.org/docs/hooks-intro.html
本次需求其實(shí)就兩個邏輯:1、輸入篩選項 。2、查詢數(shù)據(jù)
主頁面一個hooks,處理篩選項以及數(shù)據(jù)展示。數(shù)據(jù)請求邏輯單獨(dú)弄一個hooks。
主頁面hooks:
import React, { useState, useEffect} from 'react'; import { Tabs, Input, RangeTime, Button, Table } from './components'; const App = () => { // 數(shù)據(jù)類型 const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }]; const [tab, setTab] = useState(1); // 數(shù)據(jù)ID const [dataId, setDataid] = useState(''); // 標(biāo)題 const [title, setTitle] = useState(''); // 時間區(qū)間, 默認(rèn)為至今一周時間 const now = Date.now(); const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]); // 數(shù)據(jù)列表 const [dataList, setDataList] = useState([]); // 點(diǎn)擊搜索按鈕 function handleBtnClick() { // 請求數(shù)據(jù) ... } return <section className="app"> <Title title="數(shù)據(jù)查詢" /> <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} /> <Input value={dataId} placeholder="請輸入數(shù)據(jù)ID" onChange={setDataid}>ID</Input> <Input value={title} placeholder="請輸入數(shù)據(jù)標(biāo)題" onChange={setTitle}>標(biāo)題</Input> <TimeRange label="數(shù)據(jù)時間" value={timeRange} onChange={handleTimeChange}/> <article className="btn-container"> <Button type="primary" onClick={handleBtnClick}> 查詢 </Button> </article> <Table dataList={dataList}></Table> </section> };
上面的代碼,完成了篩選項的處理邏輯。下面來實(shí)現(xiàn)負(fù)責(zé)數(shù)據(jù)請求的hooks.
數(shù)據(jù)請求hooks:
import React, { useState, useEffect } from 'react'; import jsonp from '../tools/jsonp'; function MyFecth(url) { // 是否正在請求中 const [isLoading, setIsLoanding] = useState(false); // 請求參數(shù) const [queryParams, setQueryParams] = useState(null); // 請求結(jié)果 const [data, setData] = useState(null); // 向接口發(fā)起請求 const fetchData = async () => { if(queryParams === null) { return; } setIsLoanding(true); const res = await jsonp({ url: url, data: queryParams }); setData(res); setIsLoanding(false); } // 只要queryParams改變,就發(fā)起請求 useEffect(()=> { fetchData(); }, [queryParams]); // 供外部調(diào)用 const doGet = (params) => { setQueryParams(params); } return { isLoading, data, doGet } } export default MyFecth;
在主頁面中,引用數(shù)據(jù)請求hooks:
import React, { useState, useEffect} from 'react'; import { Tabs, Input, RangeTime, Button, Table } from './components'; import MyFecth from './MyFetch'; const App = () => { // ①使用數(shù)據(jù)請求hooks const { isLoading, data, doGet } = MyFecth('http://xxx'); // 數(shù)據(jù)類型 const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }]; const [tab, setTab] = useState(1); // 數(shù)據(jù)ID const [dataId, setDataid] = useState(''); // 標(biāo)題 const [title, setTitle] = useState(''); // 時間區(qū)間, 默認(rèn)為至今一周時間 const now = Date.now(); const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]); // 數(shù)據(jù)列表 const [dataList, setDataList] = useState([]); // 點(diǎn)擊搜索按鈕 function handleBtnClick() { // ②點(diǎn)擊按鈕后請求數(shù)據(jù) const params = {}; title && (params.title = title); dataId && (params.dataId = dataId); params.startTime = String(timeRange[0]); params.endTime = String(timeRange[1]); doGet(params); } // ③data改變后,重新渲染列表。 // 這里相當(dāng)于 componentDidUpdate。當(dāng)data發(fā)生改變時,重新渲染頁面 useEffect(() => { setDataList(data); }, [data]); // ④首次進(jìn)入頁面時,無任何篩選項。拉取數(shù)據(jù),渲染頁面。 // useEffect第二個參數(shù)為一個空數(shù)組,相當(dāng)于在 componentDidMount 時執(zhí)行該「副作用」 useEffect(() => { doGet({}); }, []); return <section className="app"> <Title title="數(shù)據(jù)查詢" /> <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} /> <Input value={dataId} placeholder="請輸入數(shù)據(jù)ID" onChange={setDataid}>ID</Input> <Input value={title} placeholder="請輸入數(shù)據(jù)標(biāo)題" onChange={setTitle}>標(biāo)題</Input> <TimeRange label="數(shù)據(jù)時間" value={timeRange} onChange={handleTimeChange}/> <article className="btn-container"> <Button type="primary" isLoading={isLoading} onClick={handleBtnClick}> 查詢 </Button> </article> <Table dataList={dataList}></Table> </section> };
關(guān)于React Hooks的一些思考
使用hooks寫完這個需求,最直觀的感受就是,代碼寫起來很爽。不需要像以前那樣寫很多的setState。其次就是
hooks的api設(shè)計得很優(yōu)秀,一個useState的就能將【狀態(tài)】和【變更狀態(tài)的邏輯】兩兩配對。React的基本思想就是【數(shù)據(jù)到視圖的映射】,在hooks中,使用useEffect來表明其中的【副作用】,感覺react官方也傾向于不區(qū)分componentDidMount和componentDidUpdate。
從api設(shè)計就能看出,hooks提倡組件狀態(tài)細(xì)粒度地拆分。在一個hooks組件中,可能包含很多的狀態(tài),如果用戶的某些操作,需要同時修改兩個狀態(tài),那么我需要分別調(diào)用這兩個狀態(tài)的修改邏輯,這樣會導(dǎo)致組件被重新render兩次。而在使用class寫法的組件中,只需要一次setState就好。這樣看來,hooks中render兩次的操作,可能會帶來些許的性能問題 ? 這就要求我們在設(shè)計組件結(jié)構(gòu)和state時,多斟酌,多抽象。
關(guān)于hooks的一些FAQ,官方也有很棒的文檔:https://reactjs.org/docs/hooks-faq.html
寫在后面
本文通過工作中的一個小需求,完成了一次react hooks的實(shí)踐,不過上述代碼依然有很多需要優(yōu)化的地方。這次實(shí)踐讓我最直觀的接觸了react hooks,也幫助自己進(jìn)一步理解了react團(tuán)隊的一些思想。符合預(yù)期。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
教你快速搭建 React Native 開發(fā)環(huán)境
這篇文章主要介紹了搭建 React Native 開發(fā)環(huán)境的詳細(xì)過程,本文通過圖文指令給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹
這篇文章主要介紹了React使用Context與router實(shí)現(xiàn)權(quán)限路由的詳細(xì)過程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫,它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下2023-11-11react antd實(shí)現(xiàn)動態(tài)增減表單
antd是react流行的ui框架庫,本文主要介紹了react antd實(shí)現(xiàn)動態(tài)增減表單,分享給大家,感興趣的小伙伴們可以參考一下2021-06-06react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03