React 18改动

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的步骤

1. 在服务器上获取整个应用数据（这里服务器指客户端的浏览器内置服务器）
2. 在服务器上将整个用用程序渲染成HTML并且在响应中返回，可以在控制台 network得到的，一个当前路由名称的请求
3. 客户端加载整个程序的javascript代码
4. 客户端的javascript 逻辑绑定到服务端生成整个应用程序的Html
   SSR在展示任何东西前都必须获取到所有东西（数据）

关键的点是 在每一步都要在下一步开始前加载完成整个应用。一旦有某一步加载比较慢就会阻止应用的其他部分。

所以React 18 推荐使用 会将整个应用拆分成比较小的独立单元。这样就不会阻碍整个应用。

3、startTransition
startTransition会在变更期间给用户展示信息，比如在表单中input 对输入的值数据筛选并控制输入的值，会用到 setValue（e.target.value）
更新一般有两种方式

1. 紧急更新，更改了input的值，也会更新依赖他的视图
2. 搜索数据是并不是很紧急，每次输入就会在更新后触发（有点像以前做的 防抖）

看到这里可能会问和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的方法编码也是可以的。

以上就是本文全部内容了，如有不当之处请各位小伙伴 斧正