记录一次完整的react hooks实践【黑马web前端】

更新时间:2019年07月26日 11时17分24秒来源:黑马程序员论坛

写在前面

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。其次就是

hooks的api设计得很优秀，一个useState的就能将【状态】和【变更状态的逻辑】两两配对。React的基本思想就是【数据到视图的映射】，在hooks中，使用useEffect来表明其中的【副作用】，感觉react官方也倾向于不区分componentDidMount和componentDidUpdate。

从api设计就能看出，hooks提倡组件状态细粒度地拆分。在一个hooks组件中，可能包含很多的状态，如果用户的某些操作，需要同时修改两个状态，那么我需要分别调用这两个状态的修改逻辑，这样会导致组件被重新render两次。而在使用class写法的组件中，只需要一次setState就好。这样看来，hooks中render两次的操作，可能会带来些许的性能问题 ? 这就要求我们在设计组件结构和state时，多斟酌，多抽象。

关于hooks的一些FAQ，官方也有很棒的文档：https://reactjs.org/docs/hooks-faq.html

写在后面

本文通过工作中的一个小需求，完成了一次react hooks的实践，不过上述代码依然有很多需要优化的地方。这次实践让我最直观的接触了react hooks，也帮助自己进一步理解了react团队的一些思想。符合预期。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

记录一次完整的react hooks实践【黑马web前端】

相关阅读