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

React Transition：优化用户体验的秘密武器

news 2026/5/28 16:03:12

React Transition：优化用户体验的秘密武器

前言

各位前端小伙伴，不知道你们有没有遇到过这种情况：当页面进行大量渲染时，用户输入会被阻塞，导致体验很差！

我曾经开发过一个搜索功能，当用户输入时，列表会立即更新，导致输入卡顿。后来我引入了React Transition，用户体验大大提升！

什么是Transition？

Transition是React 18引入的新特性，它允许我们将状态更新标记为"过渡状态"，让React优先处理紧急更新（如用户输入），延迟处理非紧急更新。

Transition工作原理

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 紧急更新 │ │ Transition │ │ 渲染队列 │ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │ │ │ │ 1. 用户输入事件 │ │ │───────────────────────>│ │ │ │ │ │ │ 2. 标记为Transition │ │<───────────────────────│ │ │ │ │ │ 3. 优先处理紧急更新 │ │ │───────────────────────>│ │ │ │ │ │ │ │ 4. 延迟处理Transition│ │ │────────────────────────>│

startTransition基本用法

包装非紧急更新

import { startTransition } from 'react' function SearchInput({ onSearch }) { const [query, setQuery] = useState('') function handleChange(e) { const value = e.target.value setQuery(value) startTransition(() => { onSearch(value) }) } return <input value={query} onChange={handleChange} /> }

对比传统方式

// 传统方式 - 所有更新同步执行 function handleChange(e) { const value = e.target.value setQuery(value) onSearch(value) // 会阻塞用户输入 } // Transition方式 - 非紧急更新延迟执行 function handleChange(e) { const value = e.target.value setQuery(value) startTransition(() => { onSearch(value) // 不会阻塞用户输入 }) }

useTransition Hook

基本用法

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> ) }

控制过渡状态

function App() { const [isPending, startTransition] = useTransition({ timeoutMs: 3000 // 最大等待时间 }) const [count, setCount] = useState(0) function handleClick() { startTransition(() => { setCount(c => c + 1) }) } return ( <div> <button onClick={handleClick} disabled={isPending}> {isPending ? 'Updating...' : 'Increment'} </button> <div>Count: {count}</div> </div> ) }

Transition实战

实现流畅的搜索体验

import { useState, startTransition, useTransition } from 'react' function SearchApp() { const [query, setQuery] = useState('') const [results, setResults] = useState([]) const [isPending, startTransition] = useTransition() function handleSearch(value) { setQuery(value) startTransition(() => { const newResults = performSearch(value) setResults(newResults) }) } return ( <div> <input type="text" value={query} onChange={(e) => handleSearch(e.target.value)} placeholder="Search..." /> {isPending && <div className="loading">Loading...</div>} <ul> {results.map((result) => ( <li key={result.id}>{result.title}</li> ))} </ul> </div> ) }

实现复杂表单优化

import { useState, useTransition } from 'react' function ComplexForm() { const [formData, setFormData] = useState({ name: '', email: '', address: '', preferences: [] }) const [isPending, startTransition] = useTransition() const [preview, setPreview] = useState(null) function handleChange(field, value) { setFormData(prev => ({ ...prev, [field]: value })) startTransition(() => { const newPreview = generatePreview({ ...formData, [field]: value }) setPreview(newPreview) }) } return ( <div> <form> <input type="text" value={formData.name} onChange={(e) => handleChange('name', e.target.value)} placeholder="Name" /> <input type="email" value={formData.email} onChange={(e) => handleChange('email', e.target.value)} placeholder="Email" /> </form> {isPending && <div>Generating preview...</div>} {preview && <PreviewComponent data={preview} />} </div> ) }

Transition最佳实践

1. 使用startTransition包装耗时操作

function handleClick() { // 紧急更新：立即更新UI setIsLoading(true) // 非紧急更新：可以延迟执行 startTransition(() => { const data = fetchLargeData() setData(data) setIsLoading(false) }) }

2. 结合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} /> }

3. 避免在Transition中执行副作用

// 不好的做法 startTransition(() => { setData(data) sendAnalytics() // 副作用不应该在Transition中执行 }) // 好的做法 startTransition(() => { setData(data) }) useEffect(() => { sendAnalytics() // 副作用应该在useEffect中执行 }, [data])

Transition vs useDeferredValue

特性	startTransition	useDeferredValue
适用场景	状态更新	派生值计算
控制方式	主动控制	被动延迟
返回值	isPending状态	延迟后的值
使用方式	包装更新函数	包装值