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

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

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

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

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

如果使用以前的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() {
        
        
        
        
        查詢
        
    }
    
    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/hook...
本次需求其實就兩個邏輯：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("");
    // 標(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([]);

    // 點擊搜索按鈕
    function handleBtnClick() {
        // 請求數(shù)據(jù)
        ...
    }

    return