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的使用小例子》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

The Intersectional Internet

The Intersectional Internet

Safiya Umoja Noble、Brendesha M. Tynes / Peter Lang Publishing / 2016

From race, sex, class, and culture, the multidisciplinary field of Internet studies needs theoretical and methodological approaches that allow us to question the organization of social relations that ......一起来看看 《The Intersectional Internet》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具