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

9d328资讯网——每日最新资讯28at.com

在开发过程中，我们常常会遇到这样的场景。9d328资讯网——每日最新资讯28at.com

有一个列表，但是我们需要根据列表的不同类型查询并显示对应类型的数据。如头图所示。这里有一个很明确的现象就是，不同的类型会对应不同的列表，但是当我们代入抽象思维思考一下就能轻易发现，除了类型不同之外，其他的所有特性都是一样的。9d328资讯网——每日最新资讯28at.com

一样的接口、一样的 UI、一样的类型、一样的交互。因此我们很容易会想到，把多个类型的列表当成同一个列表来处理，当 type 发生变化时去重新请求接口就可以轻松完成这个功能。9d328资讯网——每日最新资讯28at.com

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

这样的处理是有一定合理性的，我相信很多小伙伴也会这样处理。因为他非常符合语义。9d328资讯网——每日最新资讯28at.com

不过 React 新官方文档中，提出了一个更巧妙的方式来解决这个问题。9d328资讯网——每日最新资讯28at.com

首先，我们可以将列表逻辑单独拆分为一个子组件。该子组件接收参数 type 作为一个 props9d328资讯网——每日最新资讯28at.com

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 变化的情况下，做到跟刚才一样的效果。9d328资讯网——每日最新资讯28at.com

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

在 React 的 diff 过程中，当一个组件的 key 值发生了变化，那么该组件将会被重新创建。我们也正是巧妙的利用了这个内部逻辑，将代码改进成现在这样。9d328资讯网——每日最新资讯28at.com

在 ListPart 的封装中，我们还可以借助我们之前封装自定义 hook 的思路，进一步简化代码。9d328资讯网——每日最新资讯28at.com

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 是提前封装好的列表组件，当我们在写页面页面时，整个列表的开发工作量将会非常小。9d328资讯网——每日最新资讯28at.com

完整代码如下：9d328资讯网——每日最新资讯28at.com

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 值发生变化，子组件会被重置。这样的思路还可以运用到别的类似场景。9d328资讯网——每日最新资讯28at.com

例如，你请求了一个书籍列表，但是某一个区域只能显示选中的书籍的部分信息与几条用户评价，当我们选中别的书籍时，这信息与评论都需要全部更新。9d328资讯网——每日最新资讯28at.com

这里处理起来比较麻烦的是书籍部分信息是从父级传递而来，而评论信息却是需要重新请求获取。9d328资讯网——每日最新资讯28at.com

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

function BookProfile() {  ...  return (    <div>      ...      <CurrentBookPart info={infolist[i]} key={bookid} />    </div>  )}

function CurrentBookPart(props) {  const [comment, setComment] = useState()  ...}

总结

合理运用这个技巧，可以让我们的代码更加高效、低耦合，逻辑更加顺畅。也能够大幅度提高我们的开发效率，快快去重新查看一下你的项目，有没有可以使用这种方式重构的地方吧。9d328资讯网——每日最新资讯28at.com

React 新的官方文档确实写得非常好，提供了许多项目开发最佳实践的思路。这些思路和实用技巧，同样也适用于 Vue，也能够提高我们对 Vue 的使用心得。9d328资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-83618-0.html从 React 新官网学到的一个优秀实践妙招

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： C++中的显式虚函数重载：override与final详解

下一篇： 要么返回错误值，要么输出日志，别两样都做