介绍
我编写 React 代码已经 3 年多了。然而，我最初没有关注的一件事是优化 React 性能。大多数时候，技术债务会不断积累，优化性能变得充满挑战。
从一开始就专注于优化是相当困难的，但您可以不时地安排优化以避免巨大的技术债务。
我们将研究 React 的一些优化技术。这可以在您编写代码时实现。这是选择这种方法而不是另一种方法的问题。
那么，让我们开始吧。
1. 优化大列表
渲染列表很常见，因为 React 中有组件。渲染大型列表具有挑战性，因为它可能会导致渲染缓慢和内存使用。虚拟化是处理此类问题的最佳方法。它只是仅渲染可见列表，其他项目将在需要时渲染。
React Window 和 React Virtualized 是虚拟化列表中流行的库。它们仅渲染视口中可见的项目，从而显着减少在任何给定时间渲染的 DOM 节点的数量。
这是一个 React 窗口的示例：
import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
<List
height={500} // Height of the container
itemCount={items.length} // Total number of items
itemSize={35} // Height of each item
width={300} // Width of the container
>
{({ index, style }) => (
<div style={style}>
{items[index]}
</div>
)}
</List>
);
登录后复制
2. 使用备忘录
useMemo 是一个 React hook，用于记住计算结果。因此，除非依赖关系发生变化，否则它不允许对计算进行多次处理。在函数或计算成本昂贵且不应在每次渲染上重新执行的情况下，这对于优化性能非常有用。
useMemo 的语法是：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
登录后复制
如您所见，useMemo 有两个参数：
一个返回值以便可以记忆的函数。
一组依赖项，用于确定何时应重新计算存储的值。
这是 useMemo 的示例：
import React, { useState, useMemo } from 'react';
const ExpensiveComponent = ({ a, b }) => {
const computeExpensiveValue = (a, b) => {
console.log('Computing expensive value...');
return a + b;
};
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return (
Computed Value: {memoizedValue}
);
};
const ParentComponent = () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const [count, setCount] = useState(0);
return (
setCount(count + 1)}>Increment Count
);
};
登录后复制
3. 代码分割
在传统设置中，应用程序的所有组件都捆绑到一个文件中。代码拆分是一种优化技术，用于将应用程序分解为更小的块。当您加载较小的组件时，它会减少应用程序的加载时间，并避免其他不需要的组件。
这是代码拆分的示例：
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(null);
const loadComponent = async () => {
const { default: LoadedComponent } = await import('./MyComponent');
setComponent(<LoadedComponent />);
};
return (
<div>
<h1>Code Splitting Example</h1>
<button onClick={loadComponent}>Load Component</button>
{component}
</div>
);
}
export default App;
登录后复制
4. 反应延迟加载
React.Lazy 是优化加载组件的重要方法。它使您能够延迟加载组件。这意味着仅在需要时才加载该组件。使用它，您可以将应用程序拆分为更小的组件并按需加载。
React.lazy() 用于动态导入组件。当需要组件时，它会异步加载，在此之前，可以显示后备 UI（如加载旋转器）。
这是延迟加载的示例：
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
const App = () => {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;
登录后复制
节流和去抖
它不仅是React特有的，也是调用函数时的通用编程。节流是一种定义函数执行频率的技术。当函数被限制时，无论事件被触发多少次，它只允许在指定的时间间隔内执行一次。例如，为按钮点击添加限制，以免按钮被过于频繁地调用。
节流示例：
import React, { useState } from 'react';
function ThrottledButton() {
const [count, setCount] = useState(0);
const throttle = (func, delay) => {
let lastCall = 0;
return () => {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
func();
}
};
};
const incrementCount = () => {
setCount((prevCount) => prevCount + 1);
};
const throttledIncrement = throttle(incrementCount, 2000);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={throttledIncrement}>Click Me</button>
</div>
);
}
export default ThrottledButton;
登录后复制
去抖动用于确保函数在调用函数后一定时间后应被执行。当事件重复发生时，去抖函数只会在事件停止触发指定的延迟时间后执行。例如，当用户输入搜索输入并提供建议时，我们会在调用该函数之前等待几毫秒，以便用户完成输入。
去抖动示例：
import React, { useState } from 'react';
function debounce(func, delay) {
let timeoutId;
return function (...args) {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
}
const DebouncedSearch = () => {
const [query, setQuery] = useState('');
const handleSearch = (event) => {
setQuery(event.target.value);
console.log('Searching for:', event.target.value);
// Here you would typically trigger an API call or filter a list based on the query
};
const debouncedSearch = debounce(handleSearch, 500);
return (
<div>
<h1>Search</h1>
<input
type="text"
placeholder="Type to search..."
onChange={debouncedSearch}
/>
<p>Search Query: {query}</p>
</div>
);
};
export default DebouncedSearch;
登录后复制
与我联系
让我们联系并了解所有技术、创新及其他方面的信息！ ？
结论
优化 React 应用程序对于确保它们平稳高效地运行至关重要，尤其是当它们的复杂性和规模不断增长时。通过结合列表虚拟化、useMemo 记忆、代码分割、延迟加载、限制和去抖动等技术，您可以显着提高 React 应用程序的性能。
我希望这个方法将有助于优化你的 React 应用程序的性能。感谢您阅读这篇文章。
以上是优化 React 应用程序以获得最佳性能的详细内容。更多信息请关注PHP中文网其他相关文章！
