一次完整的react hooks实践

摘要：本次需求其实就两个逻辑输入筛选项。当发生改变时，重新渲染页面首次进入页面时，无任何筛选项。关于的一些，官方也有很棒的文档写在后面本文通过工作中的一个小需求，完成了一次的实践，不过上述代码依然有很多需要优化的地方。

本文首发于公众号：符合预期的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