截至目前，React18已经出来半个月了。有没有小伙伴不是很了解呢？小编为大家整理了一份更新清单，包含了比较常用的更新，并列出了一些不错的案例和链接，方便大家快速上手，深入了解！浏览器最低兼容性提升由于新版react使用了Promise、Symbol、Object.assign，需要像IE等浏览器一样polyfill新的rootAPI//之前的rootAPI使用的是ReactDOM.renderReactDOM.render(,document.getElementById('root'))//现在，为了更加工程友好，像vue3，一个新的rootapiimport{createRoot}from'react-dom/client';constel=document.getElementById('app');constroot=createRoot(el);root.render();异步任务也会被“批处理”//之前在异步任务中，react无法拦截hooks对于批处理setTimeout(()=>{//这样会更新视图两次setCount(val=>val+1)setNum(val=>val+1)})//但是在18中只会更新一次转换UpdateAPI//当我们从一个视图切换到另一个视图时，一般是非紧急更新，不像点击事件需要视图立即反馈//Transition更新不会阻塞与其他视图的交互//函数组件import{useTransition}from'react';functionApp(){//isPending表示是否处于过渡状态const[isPending,startTransition]=useTransition();const[count,setCount]=useState(0);函数handleClick(){startTransition(()=>{setCount(c=>c+1);})}return(
{isPending&&}{count}
);}//类组件不提供isPending的状态值import{Component,startTransition}from'react';classAppextendsComponent{//...//紧急事件setInputValue(input);startTransition(()=>{//转换事件setSearchQuery(input);});//...}delayhook:useDeferredValue//这个hook有点类似于防抖，但是没有固定的延时，在React完成其他工作后会立即更新，而且是可中断的，不会妨碍用户与其他视图的交互const[deferredValue]=useDeferredValue(value);Suspense如果组件树的一部分尚未准备好显示，Suspense允许您以声明方式指定组件树的加载状态：//让我们看一个示例在过渡期间变得透明const[isPending,startTransition]=useTransition();functionhandleClick(){startTransition(()=>{setTab('comments');});}
}>{tab==='照片'?:} //useDeferredValue结合Suspense防止子组件紧急更新重新渲染函数Typeahead(){constquery=useSearchQuery('');constdeferredQuery=useDeferredValue(查询);constsuggestions=useMemo(()=>
