详解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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
js简易版购物车功能
Jun 17 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
chrome调试javascript详解
2015/10/21 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python集合类型用法分析
2015/04/08 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
篮球比赛策划方案
2014/06/05 职场文书
发布会邀请函
2015/01/31 职场文书
端午节活动总结报告
2015/02/11 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android