摘要：本次需求其實(shí)就兩個(gè)邏輯輸入篩選項(xiàng)。當(dāng)發(fā)生改變時(shí)，重新渲染頁(yè)面首次進(jìn)入頁(yè)面時(shí)，無(wú)任何篩選項(xiàng)。關(guān)于的一些，官方也有很棒的文檔寫(xiě)在后面本文通過(guò)工作中的一個(gè)小需求，完成了一次的實(shí)踐，不過(guò)上述代碼依然有很多需要優(yōu)化的地方。

本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan

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

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

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

如果使用以前的class寫(xiě)法，簡(jiǎn)單寫(xiě)一下，代碼可能大概長(zhǎng)成下面這樣：

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() {
        
        
        
        
        查詢
        
    }
    
    fetchData() {
        ...
        this.setState({
            dataList
        });
    }

    handleTypeChange() {
        ...
        this.setState({
            type,
        });
    }
    
    handleIdChange() {
        ...
        this.setState({
            id,
        });
    }

    handleTitleChange() {
        ...
        this.setState({
            title,
        });
    }

    handleRangeTimeChange() {
        ...
        this.setState({
            date,
        });
    }

    handleQueryBtnClick() {
        ...
    }
    ...
}使用React Hooks的寫(xiě)法
關(guān)于React hooks的相關(guān)內(nèi)容，這里就不贅述了?？梢灾苯硬榭磖eact官方文檔，寫(xiě)得非常好。
https://reactjs.org/docs/hook...
本次需求其實(shí)就兩個(gè)邏輯：1、輸入篩選項(xiàng) 。2、查詢數(shù)據(jù)
主頁(yè)面一個(gè)hooks，處理篩選項(xiàng)以及數(shù)據(jù)展示。數(shù)據(jù)請(qǐng)求邏輯多帶帶弄一個(gè)hooks。
主頁(yè)面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("");
    // 時(shí)間區(qū)間, 默認(rèn)為至今一周時(shí)間
    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() {
        // 請(qǐng)求數(shù)據(jù)
        ...
    }

    return