详解react-refetch的使用小例子


Posted in Javascript onFebruary 15, 2019

使用react-refetch来简化api获取数据的代码

const List = ({data: gists}) => {
 return (
  <ul>
   {gists.map(gist => (
    <li key={gist.id}>{gist.description}</li>
   ))}
  </ul>
 )
}

const withData = url => Part => {
 return class extends Component {
  state = {data: []}

  componentDidMount() {
   fetch(url)
    .then(response => response.json ? response.json() : response)
    .then(data => this.setState({data}))
  }

  render() {
   return <Part {...this.state} {...this.props} />
  }
 }
}

const ListWithGists = withData('https://api.github.com/users/gaearon/gists')(List)

上面的代码,我们将api获取数据的逻辑用高阶组件抽离出来,下面我们再用react-refetch来简化上面的异步代码

import { connect as refetchConnect } from 'react-refetch'

const List = ({gists}) => {
 if (gists.pending) {
  return <div>loading...</div>
 } else if (gists.rejected) {
  return <div>{gists.reason}</div>
 } else if (gists.fulfilled) {
  return (
   gists.fulfilled && <ul>
    {gists.value.map(gist => (
     <li key={gist.id}>{gist.description}</li>
    ))}
   </ul>
  )
 }
}

const ListWithGists = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))(List)

瞬间清爽多了,顺便利用react-refetch提供的属性,顺便把loading逻辑也添加了

分离列表和项目的职责

很明显,List组件是一个渲染列表的组件,他的职责就是渲染列表,但是我们在这里也处理了单个Item的逻辑,我们可以将其进行职责分离,List只做列表染,而Gist也只渲染自身

const Gist = ({description}) => (
 <li>
  {description}
 </li>
)

const List = ({gists}) => {
 if (gists.pending) {
  return <div>loading...</div>
 } else if (gists.rejected) {
  return <div>{gists.reason}</div>
 } else if (gists.fulfilled) {
  return (
   gists.fulfilled && <ul>
    {gists.value.map(gist => <Gist key={gist.id} {...gist} />)}
   </ul>
  )
 }
}

使用react-refetch来给Gist添加功能

react-refetch的connect方法接收一个函数作为参数,这个函数返回一个对象,如果结果对象的值是一个字符串,那么获取prop后,会对这个字符串发起请求,但是如果值是一个函数,那么不会立即执行,而是会传递给组件,以便后续使用

值为字符串

const connectWithStar = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))

值为函数

const connectWithStar = refetchConnect(({id}) => ({
 star: () => ({
  starResponse: {
   url: `https://api.github.com/gists/${id}/star?${token}`,
   method: 'PUT'
  }
 })
}))

const Gist = ({description, star}) => (
 <li>
  {description}
  <button onClick={star}>+1</button>
 </li>
)

加工Gist组件,star函数会被传递给Gist的prop,然后就可以在Gist里面使用了

connectWithStar(Gist)

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

Javascript 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
微信小程序实现联动选择器
Feb 15 #Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
微信小程序实现左右列表联动
May 19 #Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python格式化字符串实例总结
2014/09/28 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python使用RNN实现文本分类
2018/05/24 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python同步windows和linux文件
2019/08/29 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
python中shell执行知识点
2020/05/06 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
竞争与合作演讲稿
2014/05/12 职场文书
合作协议书范本
2014/10/25 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android