написать впереди
Эта статья была впервые опубликована в публичном аккаунте: CoyPan, как и ожидалось.
React официально выпустил Hooks в версии 16.8. Давно слежу за ним, а недавно у меня просто был небольшой спрос, так что попробую.
Описание требования
Требование очень простое, гаджет запроса данных в отделе. Примерно это выглядит так:
Когда пользователь посещает страницу в первый раз, отображение данных будет извлечено. Введите условия фильтра и нажмите запрос, данные будут снова извлечены и отображены в интерфейсе.
Реализация спроса
Написание с использованием компонента класса React
Если вы используете предыдущий метод написания класса, просто напишите его, код может вырасти следующим образом:
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, я не буду здесь вдаваться в подробности. Вы можете напрямую просмотреть официальную документацию по реакции, которая очень хорошо написана.
реагировать JS.org/docs/hooks-…
На самом деле у этого требования есть две логики: 1. Элементы входного фильтра. 2. Запросить данные
Хук на главной странице, который обрабатывает элементы фильтра и отображение данных. Логика запроса данных имеет отдельный хук.
Зацепки на главной странице:
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>
};
Некоторые мысли о React Hooks
После использования хуков для написания этого требования самым интуитивным ощущением было то, что код писать очень круто. Не нужно писать столько setStates, сколько раньше. Во-вторых,
API хуков очень хорошо спроектировано, один useState может сочетать [state] с [логикой изменения состояния]. Основная идея React — [отображение данных в представление]. В хуках useEffect используется для обозначения [побочных эффектов]. Я чувствую, что официальные лица React также склонны не различать componentDidMount и componentDidUpdate.
Как видно из дизайна API, хуки поддерживают мелкозернистое разделение состояний компонентов. В компоненте хуков может быть много состояний.Если какие-то операции пользователя требуют изменения двух состояний одновременно, то мне нужно вызывать логику модификации этих двух состояний по отдельности, что приведет к повторному изменению компонента. рендерится дважды. В компонентах, которые используют метод написания класса, вам нужно установить состояние только один раз. Таким образом, две операции рендеринга в хуках могут привести к некоторым проблемам с производительностью, что требует от нас больше думать и больше абстрагироваться при проектировании структуры и состояния компонента.
Для некоторых часто задаваемых вопросов о хуках у официального сайта также есть отличная документация:
реагировать JS.org/docs/hooks-…
написать на обороте
Эта статья завершила практику реактивных хуков через небольшое требование в работе, но в приведенном выше коде все еще есть много мест, которые необходимо оптимизировать. Эта практика дала мне наиболее интуитивный контакт с хуками реагирования, а также помогла мне глубже понять некоторые идеи команды реагирования. В соответствии с ожиданиями.