当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使您的 React 应用程序更快：性能提示和最佳实践

如何使您的 React 应用程序更快：性能提示和最佳实践

来源：dev.to 2024-09-18 19:43:03 0浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《如何使您的 React 应用程序更快：性能提示和最佳实践》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

啊，反应！我们喜爱的用于构建 ui 的库。它就像一剂神奇的药剂，让我们的网络应用程序感觉具有交互性和快速性——直到有一天，它却没有了。突然，你注意到事情变慢了。点击按钮就像用信鸽寄信一样。您的应用程序从快如闪电变成了慢吞吞，用户开始给您“看”。

不过别担心！就像咖啡可以解决大部分生活问题一样（或者我们是这么认为的），一些关键技术可以增强你的 react 应用程序并使其恢复到最高速度。让我们探索 6 种简单的方法来优化你的 react 应用程序，这样它比你每天喝咖啡因的速度更快。

1.代码分割：仅加载您需要的

曾经走进一个房间，打开所有的灯，然后意识到你只需要一盏灯吗？当你将所有内容捆绑成一大块时，这就是你的 react 应用程序所做的事情。相反，通过代码分割，您只需加载应用程序当前需要的部分。就像逐个房间打开灯一样！

使用 react.lazy() 和 suspense 是实现此目的的完美方法：

import react, { suspense } from 'react';

const lazycomponent = react.lazy(() => import('./lazycomponent'));

const app = () => {
  return (
    <suspense fallback={<div>loading...</div>}>
      <lazycomponent />
    </suspense>
  );
}

为什么有帮助：代码分割通过将未使用的代码的加载推迟到必要时来减少应用程序的初始加载时间。用户无需等待整个应用程序加载即可看到屏幕上的内容。

2.延迟加载图像：不要一次加载所有零食

想象一下，订购一份披萨，却收到了一年的食品杂货。听起来很荒谬，对吧？好吧，这就是当您预先加载所有图像时会发生的情况。相反，延迟加载图像，因此您只获取必要的图像，就像一次订购一份披萨一样。

使用像react-lazyload这样的库是一个快速解决方案：

import lazyload from 'react-lazyload';

<lazyload height={200} offset={100}>
  <img src="large-image.jpg" alt="lazy loaded image" />
</lazyload>

为什么有用：通过延迟加载图像，您可以减少初始页面加载时间，并且仅在需要时下载图像，从而提高性能和用户体验。

3. usecallback 和 usememo：react 的内存提升

就像你不断重复使用同一个咖啡杯以节省清洗时间一样，如果你允许，react 可以重复使用值和函数！ usecallback 和 usememo 是帮助您存储昂贵的计算或函数的钩子，因此它们不会在每次渲染时重新计算。

usememo 示例：

const expensivecalculation = (num) => {
  return num ** 2;
};

const mycomponent = ({ num }) => {
  const squarednumber = react.usememo(() => expensivecalculation(num), [num]);

  return <div>{squarednumber}</div>;
}

usecallback 示例：

const handleclick = usecallback(() => {
  console.log("clicked");
}, []);

为什么有帮助：使用 usememo，react 不必重做昂贵的计算。 usecallback 会阻止您在每次渲染时创建新函数。这可以让 react 平稳运行——就像升级 ram 一样！

4.使用 react.memo 进行记忆：停止不必要的重新渲染

你有没有一个朋友一遍又一遍地重复同一个故事？ react 也可以像这样——即使不需要，也会重新渲染组件！这就是 react.memo 的用武之地，它阻止 react 重新渲染组件，除非它们的 props 发生变化。

const mycomponent = react.memo(({ value }) => {
  return <div>{value}</div>;
});

为什么有帮助：react.memo 就像告诉 react，“嘿，你以前听过这个！除非有新的东西，否则不要重复。”它避免了不必要的重新渲染，节省了时间和资源。

5.高效管理状态：仅在需要时才提升状态

提升状态是 react 中的常见模式，但有时我们会因为将状态提升得太高或在错误的位置管理太多状态而感到内疚。这可能会导致过度的重新渲染。尽可能保持组件本地状态，并仅在真正必要时提升状态来避免不必要的重新渲染。

const parentcomponent = () => {
  const [sharedstate, setsharedstate] = usestate(false);

  return (
    <>
      <childcomponent sharedstate={sharedstate} />
      <anotherchild setsharedstate={setsharedstate} />
    </>
  );
}

const childcomponent = ({ sharedstate }) => {
  return <div>{sharedstate ? 'active' : 'inactive'}</div>;
}

const anotherchild = ({ setsharedstate }) => {
  return <button onclick={() => setsharedstate(true)}>activate</button>;
}

为什么有帮助：通过更仔细地管理状态并仅在需要时提升它，您可以避免兄弟组件不必要的重新渲染。这可以让您的应用保持专注和高效。

6.消除用户输入的抖动：冷静下来，做出反应！

想象一下有人疯狂地在搜索栏中输入内容，而您的应用程序试图处理每一次击键。糟糕的react可能是子弹出汗了！输入去抖动——仅在用户暂停后处理输入的过程，而不是在每次按键时处理输入。

使用lodash.debounce可以解决这个问题：

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return <input type="text" value={query} onChange={handleChange} />;
}

为什么有帮助：react 不会在每次击键时都陷入恐慌，反跳动让它可以喘口气。这可以确保在处理实时用户输入（例如搜索或表单字段）时获得更好的性能。

结论：优化 react 应用程序并不是什么火箭科学——它更像是确保你不会一口气喝掉六杯咖啡！从代码分割到延迟加载图像，这些技术将帮助您保持 react 应用程序的快速响应。因此，下次当你的应用程序开始感觉迟缓时，请记住：这不是 react 的错——它只是需要一点优化！

请记住，优化 react 应用程序是一种平衡。您不需要立即投入所有这些技术。相反，确定您的应用程序的瓶颈，应用适当的优化，然后观察您的应用程序变得比您喝完咖啡的速度还要快！

感谢您的阅读，如果您喜欢这篇文章，请分享并留下建议。