react-refetch的使用小例子

栏目: 服务器 · 发布时间: 5年前

内容简介:出处:《react设计模式和最佳实践》作者:米凯莱·贝尔托利出版时间:2018年8月第1版(还算新)

出处:《react设计模式和最佳实践》

作者:米凯莱·贝尔托利

出版时间:2018年8月第1版(还算新)

使用 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)

以上所述就是小编给大家介绍的《react-refetch的使用小例子》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

结构化计算机组成

结构化计算机组成

Andrew S.Tanenbaum / 刘卫东 / 机械工业出版社 / 2001-10-1 / 46.00

AndrewcS.Tanenbaum获得过美国麻省理工学院的理学学士学位和加利福尼亚大学伯克利分校的哲学博士学位,目前是荷兰阿姆斯特丹Vrije大学计算机科学系的教授,并领导着一个计算机系统的研究小组.同时,他还是一所计算与图像处理学院的院长,这是由几所大学合作成立的研究生院.尽管社会工作很多,但他并没有中断学术研究. 多年来,他在编译技术.操作系统.网络及局域分布式系统方面进行了大量的一起来看看 《结构化计算机组成》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换