详解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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
node.js文件上传处理示例
Oct 27 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
小程序实现多列选择器
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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
js有序数组的连接问题
2013/10/01 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python实现屏保计时器的示例代码
2018/08/08 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python字符串反转的四种方法详解
2019/12/02 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python字符串三种格式化输出
2020/09/17 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
小学生读书感言
2014/02/12 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
见习报告格式要求
2014/11/04 职场文书
市场营销计划书
2015/01/17 职场文书
化验室岗位职责
2015/02/14 职场文书
党员理论学习心得体会
2016/01/21 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python