个人中心
gpt4 book ai didi

如何编写难以维护的React代码？——滥用useEffect

转载 作者：我是一只小鸟 更新时间：2023-07-25 22:31:21 27 4
gpt4 key购买 nike

如何编写难以维护的React代码？——滥用useEffect

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子:

                        
                          const ComponentA = ({ list }) => {
  const [filteredList, setFilteredList] = useState(list);
  const [filter, setFilter] = useState({});

  useEffect(() => {
    setFilteredList(_.filter(list, filter));
  }, [filter]);

  /*...*/

  return (
    <>
      {/*...*/}
      <Filter filter={filter} onChange={setFilter} />
      <List data={filteredList} />
      {/*...*/}
    </>
  );
};

事实上，filteredList 是一个衍生状态，可以通过计算 list 和 filter 得出： list + filter => filteredList 。所以可以优化成这样:

                        
                          const ComponentB = ({ list }) => {
  const [filter, setFilter] = useState({});
  const filteredList = useMemo(() => _.filter(list, filter), [list, filter]);

  /*...*/

  return (
    <>
      {/*...*/}
      <Filter filter={filter} onChange={setFilter} />
      <List data={filteredList} />
      {/*...*/}
    </>
  );
};

在改进后的代码中，我们使用了 useMemo 来计算 filteredList，这样可以避免滥用 useState 和 useEffect。通过传入依赖数组 [list, filter]，只有在 list 或 filter 发生变化时，才会重新计算 filteredList，从而优化性能.

减少状态的使用可以有助于降低代码的复杂性，减少潜在的错误。使用 useMemo 可以将计算逻辑从渲染过程中抽离出来，使代码更易于维护和理解。Less States, Less Bugs. 。

总结：简洁且高效的代码是开发者的追求目标，它不仅有助于减少错误，而且在项目的长期维护中也更容易被团队成员理解与修改.

最后此篇关于如何编写难以维护的React代码？——滥用useEffect的文章就讲到这里了,如果你想了解更多关于如何编写难以维护的React代码？——滥用useEffect的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Element-ui源码解析(二):最简单的组件Button
文章推荐： (五)MdbCluster分布式内存数据库——数据迁移架构及节点扩缩容状态图
文章推荐： 为什么Python是数据科学家的首选语言
文章推荐： 高可用三大利器—熔断
我是一只小鸟
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com