React18升级指南

React18RC.3版本已经发布，API已经稳定，现在主要是一些BUG修复，相信很快就会发布正式版。React团队对探索新功能非常谨慎。16.8版本已经过去3年了，并发模式的完整版终于来了。今天我们将从用户的角度探讨React17升级到18会遇到的问题和一些新功能。升级使用yarn，安装最新的React18RCyarnaddreact@rcreact-dom@rcchangeReact18已经放弃对IE11的支持，需要兼容IE的就用React17。createRootReact18提供了两个根API，我们称之为LegacyRootAPI和NewRootAPI。遗留根API：ReactDOM.render。这将创建一个以“传统”模式运行的根，其工作方式与React17完全相同。使用此API将收到警告，表明它已被弃用并切换到新根API。新建RootAPI：即createRoot。这将创建一个在React18中运行的根，它添加了React18的所有改进并允许使用并发功能。我们以Vite+TS作为脚手架开始了这个项目。项目启动后，你会在控制台看到一个警告：这意味着你可以直接将项目升级到React18版本，而不会直接导致breakchange。因为它只是给出一个警告，并且在整个18版本中都是可用和兼容的，并且保持了React17版本的特性。你为什么要这样做？因为直接升级项目比较直接，遇到了就换个地方，没有历史包袱。但是React组件生态非常庞大，很多组件会直接使用ReactDOM.render来渲染，比如常见UI库中类似Modal.confirm的API。这时候就需要一个版本周期来升级这些生态组件。//React17importReactDOMfrom'react-dom';constcontainer=document.getElementById('app');//LoadReactDOM.render(,container);//卸载ReactDOM.unmountComponentAtNode(container);//React18import{createRoot}from'反应-dom/客户端'；constcontainer=document.getElementById('app');constroot=createRoot(container);//加载root.render();//卸载root.unmount();另外不得不说createRootAPI和Vue3的createApp形式完全一样。FAQ：在TypeScript中，createRoot中的参数容器可以接收HTMLElement，但不能为空。使用断言或添加判断~服务端渲染hydrateRoot如果你的应用使用注水服务端渲染，请将hydrate升级为hydrateRoot。constroot=hydrateRoot(container,);//不需要执行root.render这个版本也改进了react-dom/serverAPI，全面支持Suspense和streamingSSR服务器。作为这些更改的一部分，不支持服务器上增量Suspense流的旧节点流API将被弃用。renderToNodeStream=>renderToPipeableStream。添加了renderToReadableStream以支持Deno。继续使用renderToString（对Suspense的有限支持）。继续使用renderToStaticMarkup（对Suspense的有限支持）。setStatesynchronous/asynchronous这是这个React版本中最大的突破性更新，它不向后兼容。React中的批处理只是将多个状态更新合并为一个重新渲染以获得更好的性能。在React18之前，React只能在组件生命周期函数或合成事件函数中进行批处理。默认情况下，Promise、setTimeout和本机事件不会被批处理。如果需要保持batching，可以使用unstable_batchedUpdates来实现，但不是官方API。在React18之前：functionhandleClick(){setCount(1);设置标志（真）；//批处理：将合并到一个渲染中}asyncfunctionhandleClick(){awaitsetCount(2);设置标志（假）；//同步模式：Render会被执行两次//最新的计数值可以通过RefbeforesetFlagaftersetCount}在React18中，上面的第二个例子只会有一次render，因为所有的更新都会被自动批处理。这无疑是提高应用程序整体性能的好方法。flushSyncReact18中想退出批处理怎么办？提供了官方APIflushSync。flushSync(fn:()=>R):R它接受一个函数作为参数并允许返回值。函数handleClick(){flushSync(()=>{setCount(3);});//setFlag会在setCount和render之后执行setFlag(true);}注意：flushSync以函数为作用域，内部函数多个setStates仍然是批量更新，这样可以精确控制哪些批量更新不需要：函数handleClick(){flushSync(()=>{setCount(3);setFlag(true);});//setCount和setFlag是Batchupdate，结束后setLoading(false);//这个方法会触发两次渲染}这个方法会比React17和之前的方法更优雅地控制重新渲染。flushSync在某些场景下非常有用，比如在一个表单中点击save按钮，触发子表单的关闭，并同步到全局state，state更新后调用save方法：sub-form:exportdefaultfunctionChildForm({storeTo}){const[form]=Form.useForm();//当前组件卸载时，将子表单的值同步到全局//要触发父组件同步setState，必须使用useLayoutEffectuseLayoutEffect(()=>{return()=>{storeTo(form.getFieldsValue());};},[]);return();}外部容器：{//触发子表单卸载并关闭flushSync(()=>setVisible(false));//子表单值更新到全局后，触发save方法，可以保证onSave得到最新填充的表单值onSave();}}>保存