详解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判断元素是否隐藏的方法
Jun 09 Javascript
javascript 动态创建表格
Jan 08 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
纯js实现倒计时功能
Jan 06 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
微信小程序实现限制用户转发功能的实例代码
Feb 22 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
transform python环境快速配置方法
2018/09/27 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
SQL面试题
2013/12/09 面试题
服务明星事迹材料
2014/12/29 职场文书
委托书的样本
2015/01/28 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript