即使使用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.5 秒的延迟。

我的第一个想法是，也许这么大的 DOM 树会导致输入延迟，但在原始 HTML 页面中似乎并非如此。

为什么

useTransition()

在我的示例中不能使打字流畅？

Answer 1

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

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

react-dom：ReactDOM.render 已被弃用。使用它会发出警告并以 React 17 模式运行您的应用程序。

Answer 2

如何将 PeopleList 组件包装在备忘录中。

据我的理解。每次调用 setNeedle 时，

<App/>

组件都会重新渲染，然后

<PeopleList/>

也会重新渲染，即使

<PeopleList/>

组件中没有任何更改。