记录一次完整的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>
};