React18带来了哪些新特性
一、前言
React18预计在2022年初正式发布的版本，但现在，React18已与最终版无异，现在就可以应用React18创建新项目，或者通过以下方式来对React17及以前版本进行升级：
npm install react@beta react-dom@beta现在就可以直接安装React18的预发布版而不是测试版了。需要注意的一点是,React18的挂载点和之前版本有所不同：
之前版本：
const container = document.getElementById("root");ReactDOM.render(<App/>,container);
const container = document.getElementById("root");const root = ReactDOM.createRoot(container);root.render(<App/>);
更改完挂载方式后就可以正常使用React18啦！
二、升级策略
三、React18的新特性
3.1 startTransition 将某一状态改变成过渡更新
startTransition 通过让您能够将更新标记为“过渡”来解决此问题：import { startTransition } from 'react' ;// 紧急：显示输入的内容setInputValue(input);// 将内部的任何状态更新标记为转换startTransition(() => {// Transition: 显示结果setSearchQuery(input);});
紧急更新(setInputValue)反映直接交互，例如键入、单击、按下等,直接将状态更新到state中。
过渡更新(setSearchQuery)待数据返回后,再将数据更新到state中进行渲染。
startTransition中。它与 setTimeout 有何不同？
// 显示你输入的内容setInputValue(input);// 显示结果setTimeout(() => {setSearchQuery(input);}, 0);
import { useTransition } from 'react' ;const [ isPending , startTransition ] = useTransition() ;
isPending值为true的时候，允许加载组件：{isPending && <Spinner/>}3.2 Suspense和服务器组件
const MyComponent = React.lazy( () => import("./MyComponent") );const App = () => (<Suspense fallback={ <Loading/> }> // <Loading/> 组件是加载Suspense包裹的懒加载组件中的展示loading的组件<MyConponent /></Suspense>)
<Comments />包装在一个<Suspense />中，并且所有组件会在准备好的时候与回调函数一起发送。一旦准备就绪，包含渲染评论的包就将被发送到客户端以替换Suspense回调组件。如果一个挂起的组件在它仍在加载时被点击，React 将立即停止它在其他地方正在做的事情并优先加载该组件！服务器组件不会影响程序包大小，因为它们总是在服务器上呈现。
服务器组件可以直接访问数据库。
3.3 React最新文档
3.4 不同的开发环境
3.5 React Native 跨平台
3.6 开发工具
集成分析器和时间线用来协同工作
React Native 的支持
CPU和内存分析
3.7 React未来的记忆化功能
| 钩子名 | 作用时机 | 返回 |
|---|---|---|
| useMemo | 依赖数组更新后 | 函数 |
| useEffect | DOM渲染更新后 | any |
import { useEffect,useMemo,useState } from "react"export default () => {const [params, setParams] = useState("");const [testParams,setTestParams] = useState("");const memo_test = useMemo(()=>{console.log("触发了memo")// 这里写一些操作params的数值return () => params // 将params作为返回函数的返回值带出}, [params] )useEffect( () => {console.log("触发了effect");}, [params] )return (<div><p>{memo_test()}</p><Button onClick={()=>setParams("changeParams")}>点击触发Memo更新</Button><Button onClick={()=>setTestParams("changeTestParams")}>点击触发Effect更新</Button></div>)}// 无论点击哪个按钮,始终会显示useEffect中的 "触发了effect"// 只有在更改了params的值后,才会输出 "触发了memo" 而且是先触发后渲染// p标签内部的值只有在 点击了 "点击触发Memo更新" 按钮后才显示 changeParams
3.8 Shopify Hydrogen 服务器组件
.client.jsx 在客户端文件的命名方式。
.server.jsx在服务端的文件命名方式，此文件中的依赖项不会与客户端依赖项通用。
组件文件不应该以客户端文件名 .client.jsx 和服务端文件名 .server.jsx 来命名。
客户端组件无法访问仅限服务端组件的功能，如查看文件，只能导入其他客户端组件。
服务端组件无法访问客户端的独有功能，如状态：
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
3.9 批处理
在React18以前的状态更新中，若一个状态在一次调用中更改了很多次；或者在一次调用中，更改了多个状态时,除非本次调用更改状态的函数是异步函数，否则不会批量更新。React18版本前的以下代码实例将触发两个单独的状态更新，18版本中他们将被批处理：
fetchFromApi().then(()=>{setLoading(false);setError(false);})
3.10 延迟状态
一个新的API钩子 useDeferredValue，它是将一个已知即将要延迟很长时间后获取的状态做一个标记，在加载组件和状态的时候先跳过对当前标记状态组件的状态渲染，当状态得到结果后,将状态再渲染到组件中。
举个例子，大列表通常和假设情景相符合，当deferredText加载完毕之后，才会将deferredText的值传递给MySlowList组件：
function App () {const [text,setText] = useState("hello");const deferredText = useDeferredValue(text,{timeoutMs:2000})return (<div className="App"><input value={text} onChange={handleChange} /><MySlowList text={deferredText} /></div>)}
四、总结
this.state。