当前位置：首页 > news >正文

React性能优化：从入门到精通

news 2026/6/12 23:26:26

React性能优化：从入门到精通

前言

各位前端小伙伴，不知道你们有没有遇到过这种情况：React应用运行越来越慢，用户体验越来越差！

我曾经开发过一个大型React应用，随着功能增加，性能问题越来越严重。后来我系统地学习了React性能优化技巧，应用性能提升了50%以上！

React性能问题根源

React性能问题主要来源于以下几个方面：

不必要的重新渲染
大量DOM操作
复杂的计算逻辑
内存泄漏

性能优化策略

1. 使用React.memo避免不必要的重新渲染

const MemoizedComponent = React.memo(function MyComponent(props) { return <div>{props.value}</div> }) // 自定义比较函数 const MemoizedComponent = React.memo(function MyComponent(props) { return <div>{props.value}</div> }, (prevProps, nextProps) => { return prevProps.value === nextProps.value })

2. 使用useMemo缓存计算结果

function ExpensiveComponent({ items }) { const sortedItems = useMemo(() => { return items.sort((a, b) => a.value - b.value) }, [items]) return ( <ul> {sortedItems.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ) }

3. 使用useCallback缓存函数引用

function ParentComponent() { const [count, setCount] = useState(0) const handleClick = useCallback(() => { console.log('Clicked:', count) }, [count]) return ( <div> <button onClick={() => setCount(c => c + 1)}>Increment</button> <ChildComponent onClick={handleClick} /> </div> ) }

4. 使用React.lazy和Suspense实现代码分割

import { Suspense, lazy } from 'react' const LazyComponent = lazy(() => import('./LazyComponent')) function App() { return ( <Suspense fallback={<Loading />}> <LazyComponent /> </Suspense> ) }

5. 使用虚拟列表优化长列表渲染

import { FixedSizeList } from 'react-window' function VirtualList({ items }) { const Row = ({ index, style }) => ( <div style={style}> {items[index].name} </div> ) return ( <FixedSizeList height={400} itemCount={items.length} itemSize={50} width="100%" > {Row} </FixedSizeList> ) }

6. 使用useTransition优化渲染优先级

import { useTransition, useState } from 'react' function SearchResults({ query }) { const [isPending, startTransition] = useTransition() const [results, setResults] = useState([]) useEffect(() => { startTransition(() => { const newResults = search(query) setResults(newResults) }) }, [query, startTransition]) return ( <div> {isPending && <Spinner />} <ResultsList results={results} /> </div> ) }

7. 使用useDeferredValue延迟非关键渲染

import { useDeferredValue, useMemo } from 'react' function FilteredList({ items, filter }) { const deferredFilter = useDeferredValue(filter) const filteredItems = useMemo(() => { return items.filter(item => item.includes(deferredFilter)) }, [items, deferredFilter]) return <List items={filteredItems} /> }

8. 使用React DevTools Profiler分析性能

import { Profiler } from 'react' function onRender( id, phase, actualDuration, baseDuration, startTime, commitTime ) { console.log(`Component ${id} rendered in ${actualDuration}ms`) } function App() { return ( <Profiler id="App" onRender={onRender}> <MainContent /> </Profiler> ) }

性能优化实战

场景1：优化表单输入

import { useState, useCallback, useMemo } from 'react' function Form() { const [formData, setFormData] = useState({ name: '', email: '', message: '' }) const handleChange = useCallback((field, value) => { setFormData(prev => ({ ...prev, [field]: value })) }, []) const isValid = useMemo(() => { return formData.name.length > 0 && formData.email.includes('@') && formData.message.length > 10 }, [formData]) return ( <form> <input type="text" value={formData.name} onChange={(e) => handleChange('name', e.target.value)} /> <input type="email" value={formData.email} onChange={(e) => handleChange('email', e.target.value)} /> <textarea value={formData.message} onChange={(e) => handleChange('message', e.target.value)} /> <button type="submit" disabled={!isValid}>Submit</button> </form> ) }

场景2：优化列表渲染

import { useMemo, memo } from 'react' const ListItem = memo(function ListItem({ item }) { return ( <div> <h3>{item.title}</h3> <p>{item.description}</p> </div> ) }) function List({ items }) { const sortedItems = useMemo(() => { return [...items].sort((a, b) => a.date - b.date) }, [items]) const filteredItems = useMemo(() => { return sortedItems.filter(item => item.active) }, [sortedItems]) return ( <div> {filteredItems.map(item => ( <ListItem key={item.id} item={item} /> ))} </div> ) }

场景3：优化复杂计算

import { useMemo, useState } from 'react' function Calculator({ numbers }) { const [operation, setOperation] = useState('sum') const result = useMemo(() => { switch (operation) { case 'sum': return numbers.reduce((a, b) => a + b, 0) case 'average': return numbers.reduce((a, b) => a + b, 0) / numbers.length case 'max': return Math.max(...numbers) case 'min': return Math.min(...numbers) default: return 0 } }, [numbers, operation]) return ( <div> <select value={operation} onChange={(e) => setOperation(e.target.value)}> <option value="sum">Sum</option> <option value="average">Average</option> <option value="max">Max</option> <option value="min">Min</option> </select> <div>Result: {result}</div> </div> ) }

性能监控

使用useEffect监控渲染次数

import { useEffect, useRef } from 'react' function useRenderCount() { const countRef = useRef(0) useEffect(() => { countRef.current++ console.log(`Render count: ${countRef.current}`) }) return countRef.current } function MyComponent() { const renderCount = useRenderCount() return <div>Renders: {renderCount}</div> }

使用Performance API监控性能

import { useEffect } from 'react' function usePerformanceMonitor() { useEffect(() => { const observer = new PerformanceObserver((entries) => { entries.forEach(entry => { console.log(`${entry.name} took ${entry.duration}ms`) }) }) observer.observe({ entryTypes: ['measure'] }) return () => observer.disconnect() }, []) }

常见性能陷阱

陷阱1：在渲染函数中创建对象

// 不好的做法 function BadComponent() { const styles = { color: 'red', fontSize: '16px' } return <div style={styles}>Hello</div> } // 好的做法 function GoodComponent() { const styles = useMemo(() => ({ color: 'red', fontSize: '16px' }), []) return <div style={styles}>Hello</div> }

陷阱2：在渲染函数中调用函数

// 不好的做法 function BadComponent({ items }) { const sortedItems = items.sort((a, b) => a - b) return <List items={sortedItems} /> } // 好的做法 function GoodComponent({ items }) { const sortedItems = useMemo(() => { return [...items].sort((a, b) => a - b) }, [items]) return <List items={sortedItems} /> }

陷阱3：滥用useEffect

// 不好的做法 function BadComponent({ data }) { useEffect(() => { const result = processData(data) setResult(result) }, [data]) return <div>{result}</div> } // 好的做法 function GoodComponent({ data }) { const result = useMemo(() => { return processData(data) }, [data]) return <div>{result}</div> }