react基础知识就不多说了话，本文只针对 最新版本18的改动
依赖包的变动
基础依赖包的版本：
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
版本都是 18开头的，下面讲一讲具体的改动
新增的特性
1、自动批处理，（减少渲染次数，提高性能）
import {useState} from 'react'
function App () {
const [ count , setCount ] = useState ( 0 ) ;
const [ flag , setFlag ] = useState ( false ) ;
function handleClick ( ) {
setCount ( c => c + 1 ) ; // 还没有重新渲染
setFlag ( f => ! f ) ; // 还没有重新渲染
// React 只会在最后重新渲染一次（这是批处理！）,会将多个State合并成一个从重新
}
return (
< div >
< button onClick = { handleClick } > on handleClick </button >
< h1 style = { { color : flag ? "skyblue" : "green" } } > { count } </h1 >
</div >
) ;
}
export default App
效果如下
2、Suspense 的 SSR 支持
先简单介绍下React中的SSR的步骤
- 在服务器上获取整个应用数据（这里服务器指客户端的浏览器内置服务器）
- 在服务器上将整个用用程序渲染成HTML并且在响应中返回，可以在控制台 network得到的，一个当前路由名称的请求
- 客户端加载整个程序的javascript代码
- 客户端的javascript 逻辑绑定到服务端生成整个应用程序的Html
SSR在展示任何东西前都必须获取到所有东西（数据）
关键的点是 在每一步都要在下一步开始前加载完成整个应用。一旦有某一步加载比较慢就会阻止应用的其他部分。
所以React 18 推荐使用 会将整个应用拆分成比较小的独立单元。这样就不会阻碍整个应用。
3、startTransition
startTransition会在变更期间给用户展示信息，比如在表单中input 对输入的值数据筛选并控制输入的值，会用到 setValue（e.target.value）
更新一般有两种方式
- 紧急更新，更改了input的值，也会更新依赖他的视图
- 搜索数据是并不是很紧急，每次输入就会在更新后触发（有点像以前做的 防抖）
看到这里可能会问和setTimeout的区别了。setTimeout会锁定页面的而startTransition在任何更新都会标记 “transitions” 并且是可以中断的
适合使用transition的场景
使用startTransition包装任何你想要移到背后的更新。通常，这些类型的更新分为两类:
1、渲染缓慢: 这样的更新需要时间，因为React需要执行大量的工作来转换UI以显示结果。这是一个添加了startTransition的 real-world demo，以使得应用程序在一个高开销的重新渲染中间保持响应。
2、网络慢: 这样的更新需要时间，因为React正在等待一些来自网络的数据。
function App() {
const [value, setInputValue] = React.useState("");
const [isTransition, setTransion] = React.useState(false);
const [query, setSearchQuery] = React.useState("");
const handleChange = (e: { target: { value: React.SetStateAction<string>; }; }) => {
/* 高优先级任务 —— 改变搜索条件 */
setInputValue(e.target.value);
if (isTransition) {
/* transition 模式 */
React.startTransition(() => {
/* 低优先级任务 —— 改变搜索过滤后列表状态 */
setSearchQuery(e.target.value);
});
} else {
/* 不加优化，传统模式 */
setSearchQuery(e.target.value);
}
};
return (
<div>
<button onClick={() => setTransion(!isTransition)}>
{isTransition ? "transition" : "normal"}{" "}
</button>
<input onChange={handleChange} placeholder="输入搜索内容" value={value} />
<NewList query={query} />
</div>
);
}
export default App
react 18的所有改变几乎都是可选的，所以想要更新现有项目的小伙伴可以按照17的方法编码也是可以的。
以上就是本文全部内容了，如有不当之处请各位小伙伴 斧正
