写点什么

日常工作中需要避免的 9 个 React 坏习惯

  • 2024-08-27
    福建
  • 本文字数:3112 字

    阅读完需:约 10 分钟

前言


React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法。这些不佳的习惯可能导致性能下降、代码难以维护,以及其他问题。在本文中,我们将探讨日常工作中应该避免的9个坏React习惯,并提供相关示例代码来说明这些问题以及如何避免它们。


1. 属性传递问题(Prop Drilling)


属性传递问题是一种常见的不良习惯,它发生在将属性从一个组件传递到多层嵌套的子组件时。这可能导致性能问题和代码可读性降低。理想情况下,应该尽量避免将属性传递超过2层。下面是一个示例:


// 父组件function ParentComponent() {  const data = 'Some data';   return (	<ChildComponent data={data} />  );} // 子组件function ChildComponent({ data }) {  return (	<GrandchildComponent data={data} />  );} // 孙子组件function GrandchildComponent({ data }) {  // 使用数据  return <div>{data}</div>;}
复制代码


在上面的示例中,data属性通过多个嵌套层级传递,这可能导致性能问题和可读性问题。解决这个问题的方法之一是使用React的上下文(context)来共享数据,或者重新组织组件结构。


2. 导入过多所需的内容


React应用程序中,导入过多的依赖项可能会导致包变得庞大,从而增加加载时间。在日常工作中,确保只导入需要的依赖项。例如,避免导入整个库,而只导入所需的功能。


// 不良示例 - 导入整个库import _ from 'lodash'; // 良好示例 - 只导入所需的功能import { someFunction } from 'lodash';
复制代码


这有助于减小包的大小,提高应用程序性能。


3. 不将业务逻辑与组件逻辑分离


React中,尽量将业务逻辑与 UI 组件逻辑分开,以提高代码的可读性和可维护性。将业务逻辑提取到独立的服务文件或模块中,以使组件保持简单。以下是一个示例:


// 不良示例 - 业务逻辑混杂在组件中function UserProfile() {  const user = getUserData(); // 从API获取用户数据   return (	<div>	  <h1>{user.name}</h1>	  <p>{user.email}</p>	</div>  );} // 良好示例 - 业务逻辑分离function UserProfile() {  const user = useUserData(); // 从独立服务获取用户数据   return (	<div>	  <h1>{user.name}</h1>	  <p>{user.email}</p>	</div>  );}
复制代码


通过将业务逻辑提取到独立的useUserData函数中,使组件更加清晰和可维护。


4. 在每次渲染时重复执行工作


React组件可能会在不同时间点重新渲染,如果不小心,某些工作可能会在每次渲染时都重复执行,这会降低性能。为了避免这种情况,可以使用useMemouseCallback来记忆化操作,以便它们不会在每次渲染时重新计算。以下是一个示例:


function List({ items }) {  // 不使用useMemo - 每次渲染都会重新过滤  const filteredItems = items.filter(item => item.active);   // 使用useMemo - 只在items发生变化时重新过滤  const filteredItems = useMemo(() => items.filter(item => item.active), [items]);}
复制代码


通过使用useMemo,可以避免在每次渲染时重新计算filteredItems,从而提高性能。


5. 不正确使用 useEffect 钩子


useEffect钩子用于处理副作用,但如果不正确使用它,可能会导致创建多个事件监听器,这会引发问题。正确使用useEffect的方法包括将清理函数返回以取消订阅,以及使用空的依赖数组以确保只运行一次。以下是一个示例:


// 不良示例 - 每次渲染都会创建新的事件监听器useEffect(() => {  window.addEventListener('resize', handleResize);  return () => {	window.removeEventListener('resize', handleResize);  };}); // 良好示例 - 只在组件挂载时创建事件监听器useEffect(() => {  window.addEventListener('resize', handleResize);	return () => {	  window.removeEventListener('resize', handleResize);	};  }, []); // 空的依赖数组
复制代码


通过使用空的依赖数组,确保了事件监听器只在组件挂载时创建一次。


6. 不正确使用布尔运算符


React组件中,经常需要根据条件来渲染不同的内容。然而,不正确使用布尔运算符可能会导致意外的问题。例如:


// 不良示例 - 使用 && 运算符function ShoppingCart({ items }) {  return (	<div>	  {items.length && <p>Items in cart: {items.length}</p>}	</div>  );}
复制代码


在上述示例中,当items.length0时,<p>元素将不会渲染,这可能不是我们期望的结果。为了避免这种情况,最好将条件转化为布尔值,如下所示:


// 良好示例 - 使用Boolean()将条件转换为布尔值function ShoppingCart({ items }) {  return (	<div>	  {Boolean(items.length) && <p>Items in cart: {items.length}</p>}	</div>  );}
复制代码


通过将条件转换为布尔值,我们可以确保<p>元素按预期渲染。


7. 到处使用三元表达式进行条件渲染


三元表达式是一种强大的条件渲染工具,但滥用它可能会导致代码难以阅读。特别是当多个三元表达式嵌套在一起时,代码会变得混乱。考虑以下示例:


// 不良示例 - 多个嵌套的三元表达式function UserProfile({ user, isAdmin, isOwner }) {  return (	<div>	  {isAdmin ? (		<p>Admin</p>	  ) : isOwner ? (		<p>Owner</p>	  ) : (		<p>User</p>	  )}	</div>  );}
复制代码


在上述示例中,多个三元表达式嵌套在一起,使代码难以理解。为了提高可读性,可以考虑使用函数或组件来代替三元表达式。以下是一个改进的示例:


// 良好示例 - 使用函数代替三元表达式function UserProfile({ user, isAdmin, isOwner }) {  function getUserRole() {	if (isAdmin) {	  return 'Admin';	} else if (isOwner) {	  return 'Owner';	} else {	  return 'User';	}  }   return (	<div>	  <p>{getUserRole()}</p>	</div>  );}
复制代码


通过使用函数,我们使代码更易读和维护。


8. 不定义属性类型或不解构属性


为组件的属性定义类型和解构属性是一种良好的实践,它有助于提高代码的可维护性和稳定性。在日常工作中,我们应该使用PropTypesTypeScript等工具来为属性添加类型定义,并解构属性以使其更清晰。以下是一个示例:


// 不良示例 - 未定义属性类型和未解构属性function Person(props) {  return (	<div>	  <p>Name: {props.name}</p>	  <p>Age: {props.age}</p>	</div>  );} // 良好示例 - 定义属性类型和解构属性import PropTypes from 'prop-types'; function Person({ name, age }) {  return (	<div>	  <p>Name: {name}</p>	  <p>Age: {age}</p>	</div>  );} Person.propTypes = {  name: PropTypes.string,  age: PropTypes.number,};
复制代码


通过定义属性类型和解构属性,可以提高代码的可读性,并在属性类型错误时获得警告。


9. 较大的应用程序没进行代码拆分


对于大型React应用程序,应该考虑使用代码拆分(Code Splitting)以提高初始加载性能。代码拆分允许将代码分割为较小的块,这些块可以在需要时加载,从而减小初始包的大小。以下是一个示例:


import Loadable from 'react-loadable'; const AsyncComponent = Loadable({  loader: () => import('./AsyncComponent'),  loading: () => <div>Loading...</div>,}); function App() {  return (	<div>	  <AsyncComponent />	</div>  );}
复制代码


通过使用代码拆分,可以提高应用程序的加载速度,特别是对于较大的应用程序。


结论


React开发中,避免这九个不良习惯可以提高代码质量、性能和可维护性。通过使用示例代码来说明这些问题以及如何避免它们,可以帮助我们在日常工作中编写更高质量的React应用程序。


文章转载自:二价亚铁

原文链接:https://www.cnblogs.com/xw-01/p/18299469

体验地址:http://www.jnpfsoft.com/?from=infoq

用户头像

还未添加个人签名 2023-06-19 加入

还未添加个人简介

评论

发布
暂无评论
日常工作中需要避免的9个React坏习惯_JavaScript_不在线第一只蜗牛_InfoQ写作社区