WenSen博客

一、 自动批处理

在 React 17 中，只有事件处理函数中的状态更新会批处理。而在 React 18 中，setTimeout、Promise 等原生环境中的多次 setState 也会被合并为一次渲染，大大减少了渲染次数。

二、 useTransition

这是 React 18 最重要的新特性之一。它允许我们将某些更新标记为“非紧急”的。

import { useTransition } from 'react';
const [isPending, startTransition] = useTransition();
function handleChange(e) {

// 紧急更新：输入框回显

setInputValue(e.target.value);

        

          

            

            

              
              复制代码
              
              
            
          
          
// 非紧急更新：过滤大数据列表
startTransition(() => {
    setSearchQuery(e.target.value);
});

        
      
}

这样即使列表渲染很卡，输入框也不会卡顿。