React Hooks实战：构建数据查询工具

本文将记录一次完整的React Hooks实践，重点介绍如何在16.8版本之后使用Hooks重构一个数据查询小工具的需求。原先的需求是通过React Class Component实现，用户初次访问页面时加载数据，输入筛选条件后触发数据更新并显示在前端。 在原class组件中，关键部分如下： 1. 定义组件状态： - `type`、`id`、`title` 和 `date` 用于存储筛选条件。 - `dataList` 存储查询结果的数据。 2. `componentDidMount` 生命周期方法：在组件挂载时，调用`fetchData` 函数获取初始数据。 3. 渲染部分： - 使用`Tabs`组件展示不同类型的选项，传递`type`状态值和`onChange`事件处理函数。 - 通过`Input`组件接收用户输入，`value`属性绑定当前状态，`onChange`监听用户输入变化。 - `RangeTime`组件用于选择日期范围，同样绑定到状态和onChange事件。 - `Button`按钮触发`handleQueryBtnClick`函数，进行查询操作。 - `Table`组件展示查询结果，传入`dataList`状态值。 4. 处理函数： - `handleTypeChange`、`handleIdChange` 和 `handleTitleChange` 分别更新对应的状态。 - `fetchData`函数负责获取数据，更新`dataList`状态。 使用Hooks重构时，我们可以利用`useState`、`useEffect`等Hook来简化代码和管理状态。首先，我们将把状态和方法抽取到函数组件中，并移除生命周期方法。以下是重构后的代码示例： ```jsx import React, { useState, useEffect } from 'react'; import { Tabs, Input, RangeTime, Button, Table } from './components'; function App() { const [type, setType] = useState([]); const [id, setId] = useState(''); const [title, setTitle] = useState(''); const [date, setDate] = useState([]); const [dataList, setDataList] = useState([]); const fetchData = () => { // 从API或其他数据源获取数据并更新dataList }; const handleTypeChange = (newType) => { setType(newType); }; const handleIdChange = (newId) => { setId(newId); }; const handleTitleChange = (newTitle) => { setTitle(newTitle); }; const handleRangeTimeChange = (newDate) => { setDate(newDate); }; const handleQueryBtnClick = () => { fetchData(); }; useEffect(() => { // 在componentDidMount时执行的逻辑可以移至此处，但需确保清理工作 // fetchData(); }, []); return ( <div> {/* ...其他元素 */} <Tabs value={type} onChange={handleTypeChange} /> {/* ...其他Input和RangeTime等元素 */} <Button onClick={handleQueryBtnClick}>查询</Button> <Table dataList={dataList} /> </div> ); } export default App; ``` 在这个重构中，我们使用`useState`来创建和更新状态，`useEffect`来替代`componentDidMount`中的副作用操作。这种模式使得代码更简洁，易于理解和维护。通过使用Hooks，我们不再受限于类组件的特定生命周期方法，而是可以根据实际需要灵活地管理组件的状态和行为。