即使使用useTransition()，输入也很慢

Question

我正在玩React 18中添加的新useTransition()钩子。

我创建了一个突出显示匹配名称的应用程序。如果匹配，则项目为绿色，否则为红色。我是这样做的:

import { useState, useTransition } from 'react';
import people from './people.json'; // 20k items
const PeopleList = ({ people, highlight, isLoading }) => {
return (
<>
<div>{isLoading ? 'Loading...' : 'Ready'}</div>
<ol>
{people.map((name, index) => (
<li
key={index}
style={{
color: (
name.toLowerCase().includes(highlight)
? 'lime'
: 'red'
)
}}
>
{name}
</li>
))}
</ol>
</>
);
};
const App = () => {
const [needle, setNeedle] = useState('');
const [highlight, setHighlight] = useState('');
const [isPending, startTransition] = useTransition();
return (
<div>
<input
type="text"
value={needle}
onChange={event => {
setNeedle(event.target.value);
startTransition(
() => setHighlight(event.target.value.toLowerCase())
);
}}
/>
<PeopleList
people={people}
highlight={highlight}
isLoading={isPending}
/>
</div>
);
};
export default App;

JSON文件包含一个20k人的数组。不幸的是，在这种情况下，useTransition()似乎并没有提高性能。无论我是否使用它，输入都非常滞后，每个字符之间大约有0.5s的延迟。

我的第一个想法是，这么大的DOM树可能会导致输入延迟，但在原始HTML页面中似乎不是这样。

为什么useTransition()不能使我的例子中的输入流畅?

Answer 1

原因是你的应用运行在React 17模式下。

来源:https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html与

react-dom: ReactDOM。渲染已被弃用。使用它会发出警告并在React 17模式下运行应用程序。

Answer 2

如何在memo中包装PeopleList组件。

就我的理解而言。每当setNeedle被调用时，<App/>组件会重新渲染，然后<PeopleList/>也会重新渲染，即使<PeopleList/>组件没有任何变化。