Logo

菜单

发布于 2026-01-06 2 阅读
0

🚀 React performance quick wins 🚀 - 7 easy ways to improve your React performance - part 1 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

🚀 React 性能快速提升技巧 🚀 - 7 个提升 React 性能的简单方法 - 第一部分

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

年初的时候，我写了一篇关于React 性能优化的博文。那是我写过的最喜欢的博文之一。它很好地诠释了边学习边记录的理念。

这是一份非常深入的分析报告。它展示了如何测试和衡量React 应用程序的性能，以及许多改进方法。

相反，这篇博文旨在为你提供许多快速提升绩效的实用技巧。你可以做出一些改变和调整，而无需花费太多精力。

所以你可以把它看作是我之前那篇 React 性能优化博客文章的补充。第一篇奠定了基础，而这篇则锦上添花。

本文是系列文章的第一部分。

第二部分：即将推出

你可以从这篇博文中学到什么：

映射时始终使用键（而不是索引）。

在对数组进行映射并渲染项目列表时，请确保始终为每个项目使用键。

键可以帮助 React 识别哪些项目发生了变化、被添加或被删除。键应该是用于标识列表项的字符串，例如 ID。

这里有一个使用键的简单示例。请查看此组件的返回方法。我们在那里使用每个动物的 ID 作为键。

import * as React from 'react';
import { AnimalCard } from './animal-card';

const animals = [
  {
    id: 1,
    name: 'dog',
  },
  {
    id: 2,
    name: 'cat',
  },
  {
    id: 3,
    name: 'unicorn',
  },
];

const Animals = () => {
  return animals.map(animal => {
    return <AnimalCard key={animal.id}>{animal.name}</AnimalCard>;
  });
};

export default Animals;
Enter fullscreen mode Exit fullscreen mode

如果你不使用键值对，React 就很难确定要更新哪些项。这可能导致即使只有一个项发生了变化，也会更新所有项。

这可能会对性能产生巨大影响！😫

如果无法使用唯一标识符，索引可以作为最后的选择。虽然不建议将索引用作键，但总比完全不使用键要好。

如果项目顺序发生变化，索引也会随之改变，因此 React 无论如何都需要更新每个项目。

您可以阅读这篇关于对账的文章，了解更多关于密钥为何重要的信息。

以上就是快速提升技巧的第一条：映射时务必使用按键！

使用 React.Fragments 代替 div 作为 JSX 父元素

接下来：速胜第二弹。

当组件返回多个元素时，JSX 需要一个父元素来包裹它们。一种快捷的方法是使用 `<div>` 标签将<div>它们包裹起来。

我承认，我也这样做过，而且次数太多了。

import * as React from 'react';

const MyComponent = () => {
  return (
    <div>
      <span>Hi!</span>
      <span>Hope you can learn a lot from my blog posts</span>
    </div>
  );
};

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

但是下次当你需要一个 JSX 包装元素时，不妨再想想！你可以使用React.Fragment来实现！

import * as React from 'react';

const MyComponent = () => {
  return (
    <React.Fragment>
      <span>Hi!</span>
      <span>Hope you can learn a lot from my blog posts</span>
    </React.Fragment>
  );
};

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

最棒的是，它甚至还有一套简洁的语法。

import * as React from 'react';

const MyComponent = () => {
  return (
    <>
      <span>Hi!</span>
      <span>Hope you can learn a lot from my blog posts</span>
    </>
  );
};

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

等等，为什么这样做能提升性能呢？问得好！原因就在这里。你的 React 应用拥有的 DOM 元素越多，渲染过程所需的时间就越长。

Google 的性能优化工具 Lighthouse 建议DOM 节点总数不要超过 1500 个。

因此，通过移除所有不必要的元素div，例如我们经常用作 JSX 父元素包装器的元素，我们已经更接近目标了。而且我们还能提升性能！

您可以在这篇文章中阅读更多关于为什么应该避免过多 DOM 节点的信息：https://web.dev/dom-size/

对于已连接的数据，只需一个 useState hook 而不是多个。

另一个可以轻松实现的性能提升方法是，useState对于连接的数据，使用一个钩子而不是多个钩子。

想象一下，一位开发者创建了一个包含多个input元素的表单。因此，他添加了四个独立的useState钩子。

看起来可能像这样：

import * as React from 'react';

const MyBigForm = () => {
  const [username, setUsername] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [nickname, setNickName] = React.useState('');

  const handleUserNameChange = event => {
    setUsername(event.target.value);
  };

  const handleEmailChange = event => {
    setEmail(event.target.value);
  };

  const handlePasswordChange = event => {
    setPassword(event.target.value);
  };

  const handleNicknameChange = event => {
    setNickName(event.target.value);
  };

  return (
    <form>
      <label>Username:</label>
      <input value={username} name="username" onChange={handleUserNameChange} />

      <label>Email:</label>
      <input value={email} name="email" onChange={handleEmailChange} />

      <label>Password:</label>
      <input value={password} name="password" onChange={handlePasswordChange} />

      <label>Nickname:</label>
      <input value={nickname} name="nickname" onChange={handleNicknameChange} />
    </form>
  );
};
Enter fullscreen mode Exit fullscreen mode

useState这里事情很多onChange，对吧？呼。我们可以优化一下，让它变得更好！

通过移除单个useState钩子并实现组合钩子，我们确保减小组件的大小，从而提高性能。

我们还可以去掉所有handleChange功能，因为它们的功能似乎都一样。

import * as React from 'react';

const MyBigForm = () => {
  const [formdata, setFormdata] = React.useState({
    username: '',
    email: '',
    password: '',
    nickname: '',
  });

  const handleOnChange = event => {
    setFormdata({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };

  return (
    <form>
      <label>Username:</label>
      <input value={username} name="username" onChange={handleOnChange} />

      <label>Email:</label>
      <input value={email} name="email" onChange={handleOnChange} />

      <label>Password:</label>
      <input value={password} name="password" onChange={handleOnChange} />

      <label>Nickname:</label>
      <input value={nickname} name="nickname" onChange={handleOnChange} />
    </form>
  );
};
Enter fullscreen mode Exit fullscreen mode

哇，代码量少了很多，可读性也提高了不少，你不觉得吗？如果你处理的是关联数据，那么将状态保存在对象中始终是一个好主意。

别误会我的意思：使用和调用多个useState钩子函数并不是坏事！React 对此没有任何问题。

但在这个例子中，它还涉及到删除重复代码和重新思考你的组件。

如果 JavaScript 只需要为一个函数而不是四个函数分配内存，那也能快速提升性能！而这正是我们努力的目标，对吧？

这就是React 性能优化快速入门系列的第一部分！希望你已经能够应用其中的一些技巧，让你的 React 应用运行得更快。

如果这些建议对你有帮助，或者你还有其他建议想要分享，请告诉我。

这篇博文最初发表在marcokuehbauch.com上。

请到那里告诉我你的想法，并与其他人分享！

你也可以在推特上找到我，账号是@mkuehb。

文章来源：https://dev.to/mkuehb/react-performance-quick-wins-7-easy-ways-to-improve-your-react-performance-part-1-2433
修复 CSS3 中的折叠问题
我最喜欢的一些 JavaScrip...