详解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 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
Seajs源码详解分析
Apr 02 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
js实现车辆管理系统
Aug 26 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
相对路径转化成绝对路径
2007/04/10 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python实现kNN算法
2017/12/20 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python线程里哪种模块比较适合
2020/08/02 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
神路信息Java面试题目
2013/03/31 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
2014年村委会工作总结
2014/11/24 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
护士年终考核评语
2014/12/31 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python