useDeferredValue 举例
·
Yin灏
实例一：在搜索框中使用 useDeferredValue
function SearchBox({ onSearch }) {
const [input, setInput] = useState("");
const deferredInput = useDeferredValue(input, { timeoutMs: 500 });
useEffect(() => {
onSearch(deferredInput);
}, [deferredInput, onSearch]);
return (
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
);
}
在这个示例中，我们将一个搜索框组件包装在useDeferredValue hook 中。因为用户可能会频繁地更改搜索框中的输入内容，但我们不想在每次输入时都执行搜索操作，因此我们使用了useDeferredValue来延迟输入的处理。当用户停止输入 500ms 后，deferredInput就会更新，然后触发一个副作用函数来执行搜索操作。
实例二：在表格中使用useDeferredValue
function Table({ data }) {
const [sortBy, setSortBy] = useState("name");
const deferredSortBy = useDeferredValue(sortBy, { timeoutMs: 500 });
const sortedData = useMemo(() => {
// 根据排序字段对数据进行排序
return sort(data, deferredSortBy);
}, [data, deferredSortBy]);
return (
<table>
<thead>
<tr>
<th onClick={() => setSortBy("name")}>Name</th>
<th onClick={() => setSortBy("email")}>Email</th>
<th onClick={() => setSortBy("phone")}>Phone</th>
</tr>
</thead>
<tbody>
{sortedData.map((row) => (
<tr key={row.id}>
<td>{row.name}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
</tr>
))}
</tbody>
</table>
);
}
在这个示例中，我们定义了一个表格组件，并将排序字段包装在useDeferredValue hook 中。因为排序操作需要对整个数据集进行重新排序，并且数据集可能很大，因此我们不想在每次更改排序字段时都重新排序数据。相反，我们使用useDeferredValue来延迟排序操作，直到用户停止更改排序字段 500ms 后，更新的排序字段才会触发副作用函数，并重新计算和渲染表格。
实例三：在分页器中使用useDeferredValue
function Paginator({ totalPages, currentPage, onChange }) {
const [page, setPage] = useState(currentPage);
const deferredPage = useDeferredValue(page, { timeoutMs: 500 });
useEffect(() => {
onChange(deferredPage);
}, [deferredPage, onChange]);
return (
<div>
{Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
<button
key={p}
style={{ fontWeight: p === page ? "bold" : "normal" }}
onClick={() => setPage(p)}
>
{p}
</button>
))}
</div>
);
}
在这个示例中，我们定义了一个分页器组件，并将当前页码包装在useDeferredValue hook 中。因为用户可能会频繁地更改当前页码，但我们不想每次都重新渲染分页器和数据列表，因此我们使用了useDeferredValue来延迟页码的处理。当用户停止更改页码 500ms 后，deferredPage就会更新，触发一个副作用函数来更新数据列表和分页器。