記錄一次完整的react hooks實踐

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:00:15

記錄一次完整的react hooks實踐

記錄一次完整的react hooks實踐:寫在前面 React在16.8版本正式發(fā)布了Hooks。關(guān)注了很久，最近正好有一個小需求，趕緊來試一下。需求描述需求很簡單，部門內(nèi)部的一個數(shù)據(jù)查詢小工具。大致長成下面這樣：用戶首次訪問頁面，會拉取數(shù)據(jù)展示。輸入篩選條件，點擊查詢后，會再次拉取數(shù)據(jù)在前

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀記錄一次完整的react hooks實踐:寫在前面 React在16.8版本正式發(fā)布了Hooks。關(guān)注了很久，最近正好有一個小需求，趕緊來試一下。需求描述需求很簡單，部門內(nèi)部的一個數(shù)據(jù)查詢小工具。大致長成下面這樣：用戶首次訪問頁面，會拉取數(shù)據(jù)展示。輸入篩選條件，點擊查詢后，會再次拉取數(shù)據(jù)在前

寫在前面

React在16.8版本正式發(fā)布了Hooks。關(guān)注了很久，最近正好有一個小需求，趕緊來試一下。

需求描述

需求很簡單，部門內(nèi)部的一個數(shù)據(jù)查詢小工具。大致長成下面這樣：

用戶首次訪問頁面，會拉取數(shù)據(jù)展示。輸入篩選條件，點擊查詢后，會再次拉取數(shù)據(jù)在前端展示。

需求實現(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="標題" 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)容，這里就不贅述了。可以直接查看react官方文檔，寫得非常好。

https://reactjs.org/docs/hooks-intro.html

本次需求其實就兩個邏輯：1、輸入篩選項。2、查詢數(shù)據(jù)

主頁面一個hooks，處理篩選項以及數(shù)據(jù)展示。數(shù)據(jù)請求邏輯單獨弄一個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('');
 // 標題
 const [title, setTitle] = useState('');
 // 時間區(qū)間, 默認為至今一周時間
 const now = Date.now();
 const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
 // 數(shù)據(jù)列表
 const [dataList, setDataList] = useState([]);

 // 點擊搜索按鈕
 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ù)標題" onChange={setTitle}>標題</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>
};

上面的代碼，完成了篩選項的處理邏輯。下面來實現(xiàn)負責(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('');
 // 標題
 const [title, setTitle] = useState('');
 // 時間區(qū)間, 默認為至今一周時間
 const now = Date.now();
 const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
 // 數(shù)據(jù)列表
 const [dataList, setDataList] = useState([]);
 
 
 
 // 點擊搜索按鈕
 function handleBtnClick() {
 // ②點擊按鈕后請求數(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改變后，重新渲染列表。
 // 這里相當于 componentDidUpdate。當data發(fā)生改變時，重新渲染頁面
 useEffect(() => {
 setDataList(data);
 }, [data]);
 
 // ④首次進入頁面時，無任何篩選項。拉取數(shù)據(jù)，渲染頁面。
 // useEffect第二個參數(shù)為一個空數(shù)組，相當于在 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ù)標題" onChange={setTitle}>標題</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)細粒度地拆分。在一個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的實踐，不過上述代碼依然有很多需要優(yōu)化的地方。這次實踐讓我最直觀的接觸了react hooks，也幫助自己進一步理解了react團隊的一些思想。符合預(yù)期。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com