详解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下利用控制器载入对应脚本
Jul 17 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js获取视频时长代码
2014/04/10 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
Javascript缓存API
2016/06/14 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python爬虫文件下载图文教程
2018/12/23 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
药学专业毕业生求职信
2013/10/20 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
大学校务公开实施方案
2014/03/31 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
老公保证书怎么写
2015/02/26 职场文书
学前教育见习总结
2015/06/23 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书