useDeferredValue说明和使用

// useDeferredValue提供一个state的延迟版本, 根据其返回的state能够延迟更新UI中的某一部分, 从而达到性能优化的目的
// 1. 在组件首次渲染期间, 返回值将与传入的值相同
// 2. 在组件更新期间, React将首先使用旧值重新渲染UI结构, 这能够跳过某些复杂组件的rerender, 从而提高渲染效率. 随后, React将使用新值更新deferredValue, 并在后台使用新值重新渲染一个低优先级的更新.这也意味着, 如果在后台使用新值更新时value再次改变, 它将打断那次更新.

import React, { FC, useState, useDeferredValue, memo } from "react";

export const Entity: FC = () => {
    const [query, setQuery] = useState('')
    const defferQuery = useDeferredValue(query);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setQuery(e.currentTarget.value);
    }

    return (
        <div>
            <input value={query} onChange={handleChange} />
            {/* query === defferQuery表示值已更新完毕, 显示最新的值, 不相等表示数据还在更新, 使用透明度区分 */}
            <div style={{opacity: query === defferQuery ? 1 : 0.3}}>
                <SearchResult query={defferQuery} />
            </div>
        </div>
    )
}

const SearchResult: FC<{ query: string }> = memo((props) => {
    if (!props.query) return;
    const result = Array(30000).fill(props.query).map((item, i) => <p key={i}>{item}</p>)
    return result
})