react-refetch的使用小例子

blastz 发布于2019-08-23 15:11 / 2172人阅读

摘要：出处设计模式和最佳实践作者米凯莱贝尔托利出版时间年月第版还算新使用来简化获取数据的代码上面的代码，我们将获取数据的逻辑用高阶组件抽离出来，下面我们再用来简化上面的异步代码瞬间清爽多了，顺便利用提供的属性，顺便把逻辑也添加了分离列表和

出处：《react设计模式和最佳实践》 
作者：米凯莱·贝尔托利 
出版时间：2018年8月第1版（还算新）

使用react-refetch来简化api获取数据的代码

const List = ({data: gists}) => {
  return (
    
      {gists.map(gist => (
        {gist.description}
      ))}
    
  )
}

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 
    }
  }
}

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 loading...
  } else if (gists.rejected) {
    return {gists.reason}
  } else if (gists.fulfilled) {
    return (
      gists.fulfilled && 
        {gists.value.map(gist => (
          {gist.description}
        ))}
      
    )
  }
}

const ListWithGists = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))(List)

瞬间清爽多了，顺便利用react-refetch提供的属性，顺便把loading逻辑也添加了

分离列表和项目的职责

很明显，List组件是一个渲染列表的组件，他的职责就是渲染列表，但是我们在这里也处理了单个Item的逻辑，我们可以将其进行职责分离,List只做列表染，而Gist也只渲染自身

const Gist = ({description}) => (
  
    {description}
  
)

const List = ({gists}) => {
  if (gists.pending) {
    return loading...
  } else if (gists.rejected) {
    return {gists.reason}
  } else if (gists.fulfilled) {
    return (
      gists.fulfilled && 
        {gists.value.map(gist => )}
      
    )
  }
}

使用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}) => (
  
    {description}
    
  
)

加工Gist组件，star函数会被传递给Gist的prop，然后就可以在Gist里面使用了
connectWithStar(Gist)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101667.html

这几个编码小技巧将令你 PHP 代码更加简洁

摘要：类型检测类型检测也是一种让代码简洁的小技巧。上文中，我们只是尝试搜集了一些例子，在这些例子里，你只需做出一点小的努力，就可以让你的代码变得更好更简洁。 showImg(https://segmentfault.com/img/remote/1460000013847223); 保持代码简洁和高可读性远远要比我们想象的要难，有时候甚至比持续架构设计都要难。这里收集了一些可能对你重构代码有...

Pikachu 2019-06-28 18:36 评论0 收藏0
使用Easy Mock模拟数据，ajax请求数据小例子

摘要：学习小问题和小理解解决异步处理的问题实际应用中有很多问题消耗时间，比如传输，数据库处理，文件的读写消耗时间等，通过回调，当成功返回时执行，可以减少页面更新时间。最近学习了一下用Easy Mock模拟数据，然后通过ajax请求数据返回显示到页面上，完成一个请求数据和显示的过程，下面通过一个获取用户信息例子来说明一下： 1. 使用Easy Mock模拟数据在Easy Mock上新建一...

Corwien 2019-08-21 17:39 评论0 收藏0
写给 Android 开发的小程序布局指南，Flex 布局！

摘要：不过在小程序中，这就不是我们需要考虑的了，微信已经帮我们处理好了。而在新手阶段，暂时只需要关注两个参数指定一个块级布局，它其内的元素，总是起一个新行来显示，而微信小程序的很多视图容器组件，默认的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 评论0 收藏0
Python易学就会（三）turtle绘图入门--初级篇

摘要：比如把上面画正方形的例子稍做变化重复执行次画正方形开始画正方形结束右转度执行后，可以看到，画出一个非常规整漂亮的组合图案。　　turtle图形库源于1966年诞生的Logo语言，是入门Python的有趣工具。因其简单便捷的图形化方法、和立即反馈式的绘画效果，成为众多编程入门者的首选。相对于大多数入门教材中枯燥的语法学习，和函数、方法的演练来说，turtle的趣味性显得别具一格、极富效...

周国辉 2019-07-30 18:44 评论0 收藏0
Nest.js 入门小例子

摘要：例子目录结构如下代码编写工具采用目录功能具体描述项目根目录模块安装目录。此例子对的版本和以上的版本也是有要求的，具体看官方文档。有中文文档的，但是那个网站有时候会访问不了。不过在上有中文翻译的托管。此例子完整代码在上也可以查看。 Nest.js 入门小例子前言：虽然使用官网的cli工具生成了一个基本的项目，但是由于正常开发中的项目的目录结构往往需要自定义的，官方这个例子并不能满足我们...

olle 2019-08-22 18:00 评论0 收藏0