这篇文章将为大家详细讲解有关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() {
查询
使用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
ID
标题
查询
}; 上面的代码，完成了筛选项的处理逻辑。下面来实现负责数据请求的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
ID
标题
查询
}; 关于React Hooks的一些思考
使用hooks写完这个需求，最直观的感受就是，代码写起来很爽。不需要像以前那样写很多的setState。其次就是
hooks的api设计得很优秀，一个useState的就能将【状态】和【变更状态的逻辑】两两配对。React的基本思想就是【数据到视图的映射】，在hooks中，使用useEffect来表明其中的【副作用】，感觉react官方也倾向于不区分componentDidMount和componentDidUpdate。
从api设计就能看出，hooks提倡组件状态细粒度地拆分。在一个hooks组件中，可能包含很多的状态，如果用户的某些操作，需要同时修改两个状态，那么我需要分别调用这两个状态的修改逻辑，这样会导致组件被重新render两次。而在使用class写法的组件中，只需要一次setState就好。这样看来，hooks中render两次的操作，可能会带来些许的性能问题 ? 这就要求我们在设计组件结构和state时，多斟酌，多抽象。
关于“react hooks的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
