寫在前面
React在16.8版本正式發(fā)布了Hooks。關注了很久，最近正好有一個小需求，趕緊來試一下。
需求描述
需求很簡單，部門內部的一個數據查詢小工具。大致長成下面這樣：
用戶首次訪問頁面，會拉取數據展示。輸入篩選條件，點擊查詢后，會再次拉取數據在前端展示。
需求實現
使用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的寫法
關于React hooks的相關內容，這里就不贅述了。可以直接查看react官方文檔，寫得非常好。
https://reactjs.org/docs/hooks-intro.html
本次需求其實就兩個邏輯：1、輸入篩選項 。2、查詢數據
主頁面一個hooks，處理篩選項以及數據展示。數據請求邏輯單獨弄一個hooks。
主頁面hooks：
import React, { useState, useEffect} from 'react';import { Tabs, Input, RangeTime, Button, Table } from './components';const App = () => { // 數據類型 const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }]; const [tab, setTab] = useState(1); // 數據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]); // 數據列表 const [dataList, setDataList] = useState([]); // 點擊搜索按鈕 function handleBtnClick() { // 請求數據 ... } return <section className="app"> <Title title="數據查詢" /> <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} /> <Input value={dataId} placeholder="請輸入數據ID" onChange={setDataid}>ID</Input> <Input value={title} placeholder="請輸入數據標題" onChange={setTitle}>標題</Input> <TimeRange label="數據時間" value={timeRange} onChange={handleTimeChange}/> <article className="btn-container"> <Button type="primary" onClick={handleBtnClick}> 查詢 </Button> </article> <Table dataList={dataList}></Table> </section>};上面的代碼，完成了篩選項的處理邏輯。下面來實現負責數據請求的hooks.
數據請求hooks：
import React, { useState, useEffect } from 'react';import jsonp from '../tools/jsonp';function MyFecth(url) { // 是否正在請求中 const [isLoading, setIsLoanding] = useState(false); // 請求參數 const [queryParams, setQueryParams] = useState(null); // 請求結果 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]); // 供外部調用 const doGet = (params) => { setQueryParams(params); } return { isLoading, data, doGet }}export default MyFecth;在主頁面中，引用數據請求hooks：
import React, { useState, useEffect} from 'react';import { Tabs, Input, RangeTime, Button, Table } from './components';import MyFecth from './MyFetch';const App = () => { // ①使用數據請求hooks const { isLoading, data, doGet } = MyFecth('http://xxx'); // 數據類型 const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }]; const [tab, setTab] = useState(1); // 數據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]); // 數據列表 const [dataList, setDataList] = useState([]); // 點擊搜索按鈕 function handleBtnClick() { // ②點擊按鈕后請求數據 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]); // ④首次進入頁面時，無任何篩選項。拉取數據，渲染頁面。 // useEffect第二個參數為一個空數組，相當于在 componentDidMount 時執(zhí)行該「副作用」 useEffect(() => { doGet({}); }, []); return <section className="app"> <Title title="數據查詢" /> <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} /> <Input value={dataId} placeholder="請輸入數據ID" onChange={setDataid}>ID</Input> <Input value={title} placeholder="請輸入數據標題" onChange={setTitle}>標題</Input> <TimeRange label="數據時間" value={timeRange} onChange={handleTimeChange}/> <article className="btn-container"> <Button type="primary" isLoading={isLoading} onClick={handleBtnClick}> 查詢 </Button> </article> <Table dataList={dataList}></Table> </section>};關于React Hooks的一些思考
使用hooks寫完這個需求，最直觀的感受就是，代碼寫起來很爽。不需要像以前那樣寫很多的setState。其次就是
hooks的api設計得很優(yōu)秀，一個useState的就能將【狀態(tài)】和【變更狀態(tài)的邏輯】兩兩配對。React的基本思想就是【數據到視圖的映射】，在hooks中，使用useEffect來表明其中的【副作用】，感覺react官方也傾向于不區(qū)分componentDidMount和componentDidUpdate。
從api設計就能看出，hooks提倡組件狀態(tài)細粒度地拆分。在一個hooks組件中，可能包含很多的狀態(tài)，如果用戶的某些操作，需要同時修改兩個狀態(tài)，那么我需要分別調用這兩個狀態(tài)的修改邏輯，這樣會導致組件被重新render兩次。而在使用class寫法的組件中，只需要一次setState就好。這樣看來，hooks中render兩次的操作，可能會帶來些許的性能問題 ? 這就要求我們在設計組件結構和state時，多斟酌，多抽象。
關于hooks的一些FAQ，官方也有很棒的文檔：https://reactjs.org/docs/hooks-faq.html
寫在后面
本文通過工作中的一個小需求，完成了一次react hooks的實踐，不過上述代碼依然有很多需要優(yōu)化的地方。這次實踐讓我最直觀的接觸了react hooks，也幫助自己進一步理解了react團隊的一些思想。符合預期。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
