提高代码质量和性能的技巧-js教程-PHP中文网

eact Tricks to Improve Code Quality and Performance

React 是一个用于构建用户界面的强大 JavaScript 库，只需一些技巧，您就可以编写更干净、更高效且可维护的代码。在本文中，我们将探讨五个基本的 React 技巧，它们将帮助您编写性能更高、可读性更强的代码。

1.使用三元运算符而不是 AND (&&) 运算符来渲染元素

在 React 中，根据特定条件有条件地渲染组件或元素是很常见的。然而，当计算的表达式产生假值（例如 false、null、undefined、0 或 ''）时，使用 && 运算符进行条件渲染可能会很棘手。为了避免意外的渲染行为，最好使用三元运算符。

&& 行为示例：

在条件渲染中使用 &&：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

登录后复制

第一个示例 ({0 &&

Hello world 5
}) 将在 UI 中呈现 0，因为 0 在 JavaScript 中是一个假值，React 会将其解释为 false。然而，React 不会渲染任何内容，而是渲染假值 (0) 本身。
第二个示例 ({0 ?
Hello world 6
: null}) 将渲染 无内容。由于条件为 0（为假），因此三元运算符的计算结果将为 null，React 将不会渲染任何内容。

三元运算符的更好方法：

您可以使用三元运算符来确保渲染正确的后备内容，而不是依赖 && 运算符，尤其是当条件为假时。

{0 ? <h1>Hello world 5</h1> : null}

登录后复制

在这种情况下，如果条件为假 (0)，React 将渲染 null，这会导致不渲染任何内容，从而提供更可预测和预期的行为。

2.使用 useState 的惰性初始化器

React 的 useState 钩子可以将函数作为其初始值，允许您延迟初始化状态。当初始状态的计算成本很高或它依赖于某些只应运行一次的计算时，这特别有用。

为什么要使用延迟初始化？

性能改进：如果初始状态涉及昂贵的计算或数据获取，延迟初始化有助于推迟该成本，直到实际需要为止。
避免不必要的计算：你传递给useState作为初始值的函数只会在组件挂载期间执行一次，并且在后续渲染时不会重新计算。

示例：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

登录后复制

在此示例中：

useState(() => Math.random()) 只会在初始渲染时调用该函数一次。
这可确保随机数生成仅发生一次，从而在计算成本较高的情况下提高性能。

3.使用延迟加载组件来提高性能

React 的 React.lazy() 和 Suspense 是延迟加载组件的绝佳工具，它有助于将 JavaScript 分成更小的包，并仅在需要时加载它们。这显着减少了初始加载时间并提高了应用程序的性能。

示例：

{0 ? <h1>Hello world 5</h1> : null}

登录后复制

在此示例中：

React.lazy() 允许您动态导入 LazyComponent。
Suspense 组件用于显示加载状态，直到延迟加载的组件完全渲染。

通过使用延迟加载，您的应用程序将仅加载初始渲染所需的组件，并按需获取其他组件，从而提高性能，尤其是在大型应用程序中。

4.在 JavaScript 中使用可选链

如果您使用 JavaScript，在访问对象上的深层嵌套属性时，可选链接 (?.) 是一个救星。它可以防止尝试访问未定义或 null 的属性时发生的错误。可选链在现代 JavaScript 中可用，允许您安全地访问属性，而无需手动检查 null 或未定义。

示例：

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

登录后复制

在此示例中：

如果 data 或 info 未定义或为 null，data?.info?.address 可以安全地访问地址属性，而不会引发错误。
??如果地址未定义，运算符提供默认值。

如果没有可选链接，您需要手动检查每个级别，这很快就会导致代码混乱且难以阅读。可选的链接使其保持干净且无错误。

5.对表单使用 useRef 以避免重新渲染

在 React 中，当使用表单并且不需要组件在每次输入更改时重新渲染时，最好使用 useRef 而不是 useState。 useRef 直接存储输入字段的值，当值发生变化时不会触发重新渲染，使其对于大型表单的性能更高。

示例：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

登录后复制

在此 TypeScript 示例中：

useRef 用于跟踪输入值，而不会导致组件在每次输入更改时重新渲染。
nameRef.current 用于在提交表单时直接访问输入的值。

当表单值不需要触发重新渲染以进行验证或动态更新时，使用 useRef 特别有用，使其成为性能敏感表单的绝佳选择。

结论

通过在代码中应用这五个 React 技巧，您可以显着提高性能、可读性和可维护性。快速回顾一下：

使用三元运算符进行条件渲染，而不是 &&。
利用 useState 中的延迟初始化。
对组件实施延迟加载以缩短初始加载时间。
使用可选链在 JavaScript 中实现更安全的属性访问。
在表单中使用 useRef 以避免不必要的重新渲染。

通过这些技术，您的 React 应用程序将更加高效且更易于维护，从而带来更好的用户体验和更顺畅的开发。快乐编码！

以上是提高代码质量和性能的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！