记录一次完整的react hooks实践


Posted in Javascript onMarch 11, 2019

写在前面

记录一次完整的react hooks实践

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

需求描述

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

记录一次完整的react 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团队的一些思想。符合预期。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
es6数值的扩展方法
Mar 11 #Javascript
Vue实现一个图片懒加载插件
Mar 11 #Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 #Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 #Javascript
配置eslint规范项目代码风格
Mar 11 #Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 #Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 #Javascript
You might like
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JS打印组合功能
2016/08/04 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
python检查指定文件是否存在的方法
2015/07/06 Python
Python六大开源框架对比
2015/10/19 Python
python3.x上post发送json数据
2018/03/04 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
初三开学计划书
2014/04/27 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
执行力心得体会范文
2016/01/11 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js