一次完整的react hooks实践

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() {        ...    }     ...}

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 <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>};

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);
    // 向接口发起请求    const fetchData = async () => {        if(queryParams === null) {            return;        }        setIsLoanding(true);        const res = await jsonp({            url: url,            data: queryParams        });        setData(res);        setIsLoanding(false);    }
  // 只要queryParams改变，就发起请求    useEffect(()=> {        fetchData();    }, [queryParams]);
    // 供外部调用    const doGet = (params) => {        setQueryParams(params);    }
    return {        isLoading,        data,        doGet    }}
export default MyFecth;

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('');    // 时间区间, 默认为至今一周时间    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发生改变时，重新渲染页面    useEffect(() => {        setDataList(data);    }, [data]);        // ④首次进入页面时，无任何筛选项。拉取数据，渲染页面。    // useEffect第二个参数为一个空数组，相当于在 componentDidMount 时执行该「副作用」    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>};