记录一次完整的react hooks实践

React在16.8版本正式发布了Hooks。关注了很久，最近正好有一个小需求，赶紧来试一下。

需求描述

需求很简单，部门内部的一个数据查询小工具。大致长成下面这样：

用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。

需求实现

使用React Class Component的写法

如果使用以前的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() { <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() { ... } ... }

使用React Hooks的写法

关于React hooks的相关内容，这里就不赘述了。可以直接查看react官方文档，写得非常好。

https://reactjs.org/docs/hooks-intro.html

本次需求其实就两个逻辑：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 <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> };

上面的代码，完成了筛选项的处理逻辑。下面来实现负责数据请求的hooks.

数据请求hooks：

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;

在主页面中，引用数据请求hooks：

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

关于React Hooks的一些思考

使用hooks写完这个需求，最直观的感受就是，代码写起来很爽。不需要像以前那样写很多的setState。其次就是