我正在玩在Reaction 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文件包含一个20,000人的数组。不幸的是，在这种情况下，useTransition()似乎并没有提高性能。无论我是否使用它，输入都非常滞后，每个字符之间大约有0.5s的延迟。

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

在我的示例中，为什么useTransition()不能让输入变得流畅？