扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用hooks写React组件需要注意的5个地方
  • 226

0
分享到

使用hooks写React组件需要注意的5个地方

2024-04-02 19:04:59 226人浏览 独家记忆
摘要

目录01.不需要render的场景下使用useState 02.使用了router.push而非link 03.通过useEffect来处理actions 04.单一职责组件 05.

Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对React hooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱和错误。本文总结了5个不好的地方。

01.不需要render的场景下使用useState

在函数组件中我们可以使用useState来管理状态，这使得对状态的管理变得很简单，但是也容易被滥用，我们通过下面的代码样例看下容易忽略的地方。

不推荐×


function ClickButton(props){
 const [count, setCount] = setState(0)
 const onClickCount = () => {
  setCount((c) => c + 1)
 }
 const onClickRequest = () => {
  apiCall(count)
 }
 
 return (
  <div>
   <button onClick={onClickCount}>Click</button>
   <button onClick={onClickRequest}>Submit</button>
  </div>
 )
}

问题所在：仔细看上面的代码，乍一看其实也没什么问题，点击按钮更新 count。但是问题也就出在这里，我们的 return 部分并没有用到 count 状态，而每次 setCount 都会使组件重新渲染一次，而这个渲染并不是我们需要的，多出来的渲染会使得页面的性能变差，因此我们可以改造一下代码，如下代码：

推荐√
如果我们只是单纯的想要一个能在组件声明周期内保存的变量，但是变量的更新不需要组件的重新渲染，我们可以使用 useRef 钩子。


function ClickButton(props){
 const count = useRef(0)
 const onClickCount = () => {
  count.current++
 }
 const onClickRequest = () => {
  apiCall(count.current)
 }

 return (
  <div>
   <button onClick={onClickCount}>Click</button>
   <button onClick={onClickRequest}>Submit</button>
  </div>
 )
}

02.使用了router.push而非link

在React SPA应用中，我们用react-router来处理路由的跳转，我们很经常在组件中写了一个按钮，通过点击按钮的事件来处理路由的跳转，如下代码：

不推荐×


function ClickButton(props){
 const history = useHistory()
 const onClickGo = () => {
  history.push('/where-page')
 }
 return <button onClick={onClickGo}>Go to where</button>
}

问题所在：尽管上述代码可以正常工作，但是却不符合Accessibility（易访问性设计）的要求，此类按钮并不会被屏幕阅读器当作一个可以跳转的链接。因此我们可以改造一下代码，如下代码：

推荐√


function ClickButton(props){
 return <Link to="/next-page">
  <span>Go to where</span>
 </Link>
}

03.通过useEffect来处理actions

有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志。

不推荐×


function DataList({ onSuccess }) {
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);
 const [data, setData] = useState(null);

 const fetchData = () => {
  setLoading(true);
  callApi()
   .then((res) => setData(res))
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 useEffect(() => {
  fetchData();
 }, []);

 useEffect(() => {
  if (!loading && !error && data) {
   onSuccess();
  }
 }, [loading, error, data, onSuccess]);

 return <div>Data: {data}</div>;
}

问题所在：上面的代码使用了两个useEffect ，第一个用来请求异步数据，第二个用来调用回调函数。在第一个异步请求数据成功，才会触发第二个 useEffect 的执行，但是，我们并不能完全保证，第二个 useEffect 的依赖项完全受控于第一个 useEffect 的成功请求数据。因此我们可以改造一下代码，如下代码：

推荐√


function DataList({ onSuccess }) {
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);
 const [data, setData] = useState(null);

 const fetchData = () => {
  setLoading(true);
  callApi()
   .then((res) => {
    setData(res)
    onSuccess()
    })
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 useEffect(() => {
  fetchData();
 }, []);
 return <div>Data: {data}</div>;
}

04.单一职责组件

什么时候该把一个组件分成几个更小的组件？如何构建组件树？在使用基于组件的框架时，所有这些问题每天都会出现。然而，设计组件时的一个常见错误是将两个用例组合成一个组件。

不推荐×


function Header({ menuItems }) {
 return (
  <header>
   <HeaderInner menuItems={menuItems} />
  </header>
 );
}

function HeaderInner({ menuItems }) {
 return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

问题所在：上面的代码通过这种方法，组件HeaderInner试图同时成为两个不同的东西，一次做不止一件事情并不是很理想。此外，它还使得在其他地方测试或重用组件变得更加困难。因此我们可以改造一下代码，如下代码：

推荐√

将条件提升一级，可以更容易地看到组件的用途，并且它们只有一个职责，即<Tabs/>或<BurgerButton/>，而不是试图同时成为两个不同的东西。


function Header(props) {
 return (
  <header>
   {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}
  </header>
 )
}

05.单一职责useEffects

通过对比componentWillReceiveProps或componentDidUpdate方法，才认识到userEffect的美丽。但是没有妥当使用useEffect也是容易出问题的。

不推荐×


function Example(props) {
 const location = useLocation();
 const fetchData = () => {
  
 };

 const updateBreadcrumbs = () => {
  
 };

 useEffect(() => {
  fetchData();
  updateBreadcrumbs();
 }, [location.pathname]);

 return (
  <div>
   <BreadCrumbs />
  </div>
 );
}

问题所在：上面的useEffect同时触发了两个副作用，但是并不都是我们需要的副作用，因此我们可以改造一下代码，如下代码：

推荐√

将两个副作用从一个useEffect中分离出来。


function Example(props) {
 const location = useLocation();

 const fetchData = () => {
  
 };

 const updateBreadcrumbs = () => {
  
 };

 useEffect(() => {
  fetchData();
  updateBreadcrumbs();
 }, [location.pathname]);

 return (
  <div>
   <BreadCrumbs />
  </div>
 );
}

参考：

Five common mistakes writing react components (with hooks) in 2020

以上就是使用hooks写React组件需要注意的5个地方的详细内容，更多关于hooks写React组件的资料请关注编程网其它相关文章！

--结束END--

本文标题: 使用hooks写React组件需要注意的5个地方

本文链接: https://lsjlt.com/news/122993.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用hooks写React组件需要注意的5个地方
    目录01.不需要render的场景下使用useState 02.使用了router.push而非link 03.通过useEffect来处理actions 04.单一职责组件 05....
    99+
    2024-04-02
  • hooks写React组件的5个注意细节详解
    目录正文01.不需要render的场景下使用useState02.使用了router.push而非link03.通过useEffect来处理actions04.单一职责组件05.单一...
    99+
    2023-03-13
    hooks写React组件 React hooks
  • hooks写React组件要注意哪些细节
    今天小编给大家分享一下hooks写React组件要注意哪些细节的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。01.不需要re...
    99+
    2023-07-05
  • 使用React/Hooks时需要注意过时闭包的示例分析
    小编给大家分享一下使用React/Hooks时需要注意过时闭包的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Hooks...
    99+
    2024-04-02
  • Android LiveData使用需要注意的地方
    目录1.回调通知2.数据倒灌3.事件包装关于LiveData是什么以及基本使用方式，请参考官方文档：developer.android.com/topic/libra… 简单来说，L...
    99+
    2024-04-02
  • 浅谈使用setBounds()方法需要注意的地方
    第一点，使用这个方法，component的x，y坐标是相对于它的父容器的。如果不注意，x、y的值，比父容器的宽度和高度还大的话，就容易造成加进去组件但是显示不出来的问题。我就是遇到这么一个问题，现在才想明白。第二点，这个方法只有在父容器的布...
    99+
    2023-05-31
    setbounds 方法 用
  • Bash 脚本编写有哪些需要注意的地方？
    Bash 脚本是一种非常方便的编程语言，可以用于自动化任务、管理系统、实现批处理等多种应用场景。但是，由于 Bash 脚本的语法比较灵活，很容易出现错误，因此编写 Bash 脚本需要注意一些细节，以确保脚本的正确性和可靠性。本文将介绍 B...
    99+
    2023-07-23
    bash leetcode 并发
  • MySQL 触发器的使用及需要注意的地方
    关于触发器 现实开发中我们经常会遇到这种情况，比如添加、删除和修改信息的时候需要记录日志，我们就要在完成常规的数据库逻辑操作之后再去写入日志表，这样变成了两步操作，更复杂了。 又比如删除一个人员信息的时候，需要将他...
    99+
    2022-05-25
    MySQL 触发器
  • 使用redis集群需要注意的地方有哪些
    小编给大家分享一下使用redis集群需要注意的地方有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Redis集群相对单机在功...
    99+
    2024-04-02
  • 详解react hooks组件间的传值方式(使用ts)
    目录父传子子传父跨级组件(父传后代)父传子 通过props传值，使用useState来控制state的状态值 父组件 Father.tsx里： 子组件 Child.tsx里： ...
    99+
    2024-04-02
  • 用Go语言编写Apache接口，有哪些需要注意的地方？
    随着互联网应用越来越普及，Web服务器也变得越来越重要。Apache是最常用的Web服务器之一，它支持大量的模块和插件，可以满足不同的需求。在本文中，我们将探讨如何用Go语言编写Apache接口，并介绍一些需要注意的地方。 一、Go语言和A...
    99+
    2023-10-05
    函数 apache 接口
  • c#调用c语言dll需要注意的地方
    目录一、将C#工程和C的dll工程放在同一个解决方案下，这样就可以实现联动调试，直接从C#中进入C的dll函数里。注意：每次更改dll中的代码后都必须重新生成dll。另，C#与C中有...
    99+
    2024-04-02
  • 在 Go 中使用 NumPy 索引：有哪些需要注意的地方？
    NumPy 是一个广泛使用的 Python 科学计算库，它提供了高效的数组操作和数学函数。然而，由于 Python 的解释执行特性，NumPy 在处理大型数据集时可能会变得缓慢。为了解决这个问题，一些开发者开始使用 Go 语言来实现高性能...
    99+
    2023-06-27
    文件 numpy 索引
  • C#异步使用需要注意的几个问题
    目录一、异步模型的基本概述二、C#异步使用需要注意的几个问题三、CancellationToken 结构体1.手动取消2.利用方法取消，抛出异常3. 传参数取消4.手动触发事件取消任...
    99+
    2024-04-02
  • Git在Unix系统下的使用：有哪些需要注意的地方？
    Git是一款非常流行的版本控制工具，可以帮助开发人员轻松地管理代码的版本，同时也可以协助团队协作开发。在Unix系统下使用Git也非常方便，但是仍然有一些需要注意的地方。本文将详细介绍使用Git时需要注意的事项，并提供一些演示代码。 安...
    99+
    2023-08-09
    leetcode git unix
  • js中使用原型对象prototype需要注意的地方有哪些
    这篇文章主要为大家展示了“js中使用原型对象prototype需要注意的地方有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js中使用原型对象prototy...
    99+
    2024-04-02
  • 数组同步在Python编程中的应用有哪些需要注意的地方？
    在Python编程中，数组同步是一个非常重要的概念。它指的是将多个数组中的元素进行同步操作，以保证它们的值始终保持一致。在实际编程中，我们经常会遇到需要对多个数组进行同步操作的情况，这时就需要注意一些细节问题，以确保程序能够正确运行。本文...
    99+
    2023-10-11
    编程算法 数组 同步
  • 六个Java集合使用时需要注意的事项
    目录1.集合判空2.集合转 Map3.集合遍历4.集合去重5.集合转数组6.数组转集合1.集合判空 判断所有集合内部的元素是否为空，使用 isEmpty() 方法，而不是 size(...
    99+
    2023-01-29
    Java集合使用 Java集合
  • IDE 文件中的 ASP 重定向：有哪些需要注意的地方？
    在 ASP 的开发中，我们经常需要使用重定向功能来实现页面的跳转。ASP 重定向是一种非常常见的页面跳转方式，它可以帮助用户快速地跳转到目标页面，同时也能够帮助开发人员更好地管理页面之间的关系。在本文中，我们将介绍 ASP 重定向的相关知...
    99+
    2023-10-29
    重定向 ide 文件
  • 使用Python和Javascript创建API对象，有哪些需要注意的地方？
    API是指应用程序编程接口，是不同软件系统之间相互交互的一种手段。API对象是API的核心，是用于封装API接口的一种对象。使用Python和Javascript创建API对象是非常常见的操作，但是在创建的过程中，有一些需要注意的地方。 ...
    99+
    2023-07-19
    javascript api 对象
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作