从 React 新官网学到的一个优秀实践妙招

开发 前端
React 新的官方文档确实写得非常好,提供了许多项目开发最佳实践的思路。这些思路和实用技巧,同样也适用于 Vue,也能够提高我们对 Vue 的使用心得。

在开发过程中,我们常常会遇到这样的场景。

有一个列表,但是我们需要根据列表的不同类型查询并显示对应类型的数据。如头图所示。这里有一个很明确的现象就是,不同的类型会对应不同的列表,但是当我们代入抽象思维思考一下就能轻易发现,除了类型不同之外,其他的所有特性都是一样的。

一样的接口、一样的 UI、一样的类型、一样的交互。因此我们很容易会想到,把多个类型的列表当成同一个列表来处理,当 type 发生变化时去重新请求接口就可以轻松完成这个功能。

function ListPage() {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  const [type, setType] = useState('all')

  useEffect(() => {
    setLoading(true)
    api.get('xxx/xxx/xxx', type).then(res => {
      setList(res.data)
      setLoading(false)
      setError('')
    })
  }, [type])

  return (
    <>
      <Tabs type={type} onChange={setType} />
      <List
        list={list}
        loading={loading}
        error={error}
        renderItem={(item) => (
          <div key={item} className={s.item}>{item}</div>
        )}
      />
    </>
  )
}

这样的处理是有一定合理性的,我相信很多小伙伴也会这样处理。因为他非常符合语义。

不过 React 新官方文档中,提出了一个更巧妙的方式来解决这个问题。

首先,我们可以将列表逻辑单独拆分为一个子组件。该子组件接收参数 type 作为一个 props

function ListPart({type}) {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    api.get('xxx/xxx/xxx', type).then(res => {
      setList(res.data)
      setLoading(false)
      setError('')
    })
  }, [])
  
  return (
    <List
      list={list}
      loading={loading}
      error={error}
      renderItem={(item) => (
        <div key={item} className={s.item}>{item}</div>
      )}
    />
  )
}

然后这里的重点来了,在 ListPage 组件中,我们在刚才封装好的子组件 ListPart 上,传入一个 key 值。这样,我们就能够在不显示监听 type 变化的情况下,做到跟刚才一样的效果。

function ListPage() {
  const [type, setType] = useState('all')
  return (
    <div>
      <Tabs type={type} onChange={setType} />
      <ListPart type={type} key={type} />
    </div>
  )
}

在 React 的 diff 过程中,当一个组件的 key 值发生了变化,那么该组件将会被重新创建。我们也正是巧妙的利用了这个内部逻辑,将代码改进成现在这样。

在 ListPart 的封装中,我们还可以借助我们之前封装自定义 hook 的思路,进一步简化代码。

function ListPart({type}) {
  const { loading, list = [], error } = useFetch(api, type)
  
  return (
    <List
      list={list}
      loading={loading}
      error={error}
      renderItem={(item) => (
        <div key={item} className={s.item}>{item}</div>
      )}
    />
  )
}

这里面由于自定义 hook useFetch 是提前封装好的工具方法,List 是提前封装好的列表组件,当我们在写页面页面时,整个列表的开发工作量将会非常小。

完整代码如下:

function ListPage() {
  const [type, setType] = useState('all')

  return (
    <div>
      <Tabs type={type} onChange={setType} />
      <ListPart type={type} key={type} />
    </div>
  )
}
function ListPart({type}) {
  const { loading, list = [], error } = useFetch(api, type)
  
  return (
    <List
      list={list}
      loading={loading}
      error={error}
      renderItem={(item) => (
        <div key={item} className={s.item}>{item}</div>
      )}
    />
  )
}

其他案例

给子组件传入 key 值,当 key 值发生变化,子组件会被重置。这样的思路还可以运用到别的类似场景。

例如,你请求了一个书籍列表,但是某一个区域只能显示选中的书籍的部分信息与几条用户评价,当我们选中别的书籍时,这信息与评论都需要全部更新。

这里处理起来比较麻烦的是书籍部分信息是从父级传递而来,而评论信息却是需要重新请求获取。

不过借助这个思路,将会非常容易做到良好的解耦,我们只需要从父级通过 props 把书籍信息传递下来,然后在子组件内部自己去处理评论信息即可。从而断开评论信息与书籍切换的耦合。

function BookProfile() {
  ...

  return (
    <div>
      ...
      <CurrentBookPart info={infolist[i]} key={bookid} />
    </div>
  )
}
function CurrentBookPart(props) {
  const [comment, setComment] = useState()
  ...
}

总结

合理运用这个技巧,可以让我们的代码更加高效、低耦合,逻辑更加顺畅。也能够大幅度提高我们的开发效率,快快去重新查看一下你的项目,有没有可以使用这种方式重构的地方吧。

React 新的官方文档确实写得非常好,提供了许多项目开发最佳实践的思路。这些思路和实用技巧,同样也适用于 Vue,也能够提高我们对 Vue 的使用心得。

责任编辑:姜华 来源: 这波能反杀
相关推荐

2022-08-02 09:55:04

React前端

2022-03-16 17:01:35

React18并发的React组件render

2023-03-30 08:00:00

ReactJavaScript前端

2015-06-01 06:42:50

开源公司三大教训

2015-08-24 11:03:14

android建项目

2022-03-21 10:21:50

jQuery代码模式

2020-06-01 09:40:06

开发ReactTypeScript

2022-08-19 09:01:59

ReactTS类型

2015-07-28 11:02:15

androidapp开发

2024-05-17 08:25:06

数据驱动React语言包

2022-03-27 09:06:04

React类型定义前端

2020-09-16 14:39:13

ReactJavaScript框架

2023-11-29 07:29:28

ReactSolid

2019-09-02 13:57:07

Helm Chart工具Kubernetes

2013-07-01 11:01:22

API设计API

2014-03-10 10:03:32

SaaS网站网站经营

2023-03-19 11:42:19

React新官方文档

2009-05-20 09:49:15

2023-05-04 23:59:46

React开发工具

2022-03-14 10:02:03

散列表链表哈希表
点赞
收藏

51CTO技术栈公众号