【学习打卡】第14天 React18+TS高仿AntD从零到一打造组件库 Typescript

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第3章 神奇的 React 配合 typescript，完美输出

主讲老师：张轩

课程内容：

今天学习的内容包括：

3-17 React18 更新总览
3-18 React18- createRoot 以及 自动批处理

课程收获：

react 18
1.新增了useId，startTransition，useTransition，useDeferredValue，useSyncExternalStore，useInsertionEffect等新的 hook API

2.针对浏览器和服务端渲染的 React DOM API 都有新的变化，诸如:
React DOM Client 新增 createRoot 和 hydrateRoot 方法。
React DOM Server 新增 renderToPipeableStream 和 renderToReadableStream 方法。

3.部分弃用特性。
ReactDOM.render 已被弃用。使用它会警告：在 React 17 模式下运行您的应用程序。 -
ReactDOM.hydrate已被弃用。使用它会警告：在React 17 模式下运行您的应用程序。
ReactDOM.unmountComponentAtNode已被弃用。 ReactDOM.renderSubtreeIntoContainer 已被弃用。
ReactDOMServer.renderToNodeStream 已被弃用。

4.breaking change
自动批处理
Stricter Strict Mode
一致的 useEffect 计时
更严格的补水错误
带有悬念的布局效果
新的 JS 环境要求

createRoot 创建根以渲染或卸载的新方法。使用它来代替 ReactDOM.render。 React 18 中的新功能没有它就无法工作

1.自动批处理：此版本引入了性能改进，改变了 React 批处理更新的方式以自动执行更多批处理。有关更多信息，请参阅 React 18 中的自动批处理以减少渲染。在极少数需要退出的情况下，将状态更新包装在 flushSync 中。

2.Stricter Strict Mode：未来，React 将提供一个功能，让组件在卸载之间保留状态。为了做好准备，React 18 为严格模式引入了一个新的仅限开发的检查。 React 将自动卸载并重新安装每个组件，每当一个组件第一次挂载时，在第二次挂载时恢复之前的状态。如果这破坏了您的应用程序，请考虑删除严格模式，直到您可以修复组件以恢复使用现有状态重新安装。

3.一致的 useEffect 计时：如果在离散的用户输入事件（例如单击或 keydown 事件）期间触发更新，React 现在总是同步刷新效果函数。以前，行为并不总是可预测或一致的。

4.更严格的补水错误：由于缺少或额外的文本内容而导致的补水不匹配现在被视为错误而不是警告。 React 将不再尝试通过插入或删除客户端上的节点来“修补”单个节点以尝试匹配服务器标记，并将恢复到客户端渲染到树中最近的 边界。这确保了水合树是一致的，并避免了可能由水合不匹配引起的潜在隐私和安全漏洞。

5.挂起树总是一致的：如果一个组件在它完全添加到树之前挂起，React 不会将它以不完整的状态添加到树中或触发它的效果。相反，React 将完全丢弃新树，等待异步操作完成，然后从头开始重新尝试渲染。 React 将同时呈现重试尝试，并且不会阻塞浏览器。

6.带有悬念的布局效果：当树重新暂停并恢复为回退时，React 现在将清理布局效果，然后在边界内的内容再次显示时重新创建它们。这修复了与 Suspense 一起使用时组件库无法正确测量布局的问题。

7.新的 JS 环境要求：React 现在依赖于现代浏览器功能，包括 Promise、Symbol 和 Object.assign。如果您支持旧版浏览器和设备（例如 Internet Explorer），它们本身不提供现代浏览器功能或具有不兼容的实现，请考虑在捆绑的应用程序中包含全局 polyfill