记录一次完整的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 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
浅说js变量
May 25 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python随机读取文件实现实例
2017/05/25 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
校庆活动方案
2014/03/31 职场文书
生态养殖创业计划书
2014/05/06 职场文书
环境卫生标语
2014/06/09 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015国庆节感想
2015/08/04 职场文书
创业计划书之酒店
2019/08/30 职场文书