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

本文首發于公眾號：符合預期的CoyPan

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

需求很簡單，部門內部的一個數據查詢小工具。大致長成下面這樣：

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

如果使用以前的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的寫法
關于React hooks的相關內容，這里就不贅述了。可以直接查看react官方文檔，寫得非常好。
https://reactjs.org/docs/hook...
本次需求其實就兩個邏輯：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("");
    // 時間區間, 默認為至今一周時間
    const now = Date.now();
    const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
    // 數據列表
    const [dataList, setDataList] = useState([]);

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

    return