React 18 带来了什么

前言

最近同事在项目中引入了一些前人开垦的组件，在控制台我看到了 “ ReactDOM.render is no longer supported in React 18”。其实在React使用的过程中，版本并不是个很显性的概念，至少不像 Vue2 到 Vue3 那样，实际我听到 React18 是在我刚接触 React 开发之时，但这一年以来我一度以为我用的就是 React18。

`createRoot`

这或许就是 React18 的信使，带来了那一行报错信息。createRoot 为我们带来了状态批量更新功能，可以将多个状态改变合并为一次，以防止不必要的组件渲染。


// Before
import { render } from "react-dom";
render(<App/>, document.getElementById("root"));

// After
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<App />);

`flushSync`

状态批量更新的一个逃生通道，当你不需要自动的批量处理时，可以立即更新状态以重新渲染。


import { flushSync } from 'react-dom';

const [status,setStatus] = useState({});

const handleChangeStatus = () => {
	flushSync(()=>{
			setStatus({})
		})
}

返回 [isPending,startTransition] ，使用后者包裹的 setState 将被视为一次非紧急更新，如果出现了紧急的更新，这次更新将被暂时中断。

紧急更新

直接反映交互的更新，例如输入、点击等。

非紧急更新

以非紧急方式将 UI 从一个视图转换到另一个视图。

isPending 是反应这次更新是否被中断的一个标志。

在这之前，我们一般使用 setTimeout 来降低同一个执行栈中的部分代码优先级。

但是和 setTimeout 不同的是：

startTransition 将立即执行

setTimeout 会提供有保证的延迟，startTransition 的则根据设备的处理速度和是否有其他紧急更新。

startTransition 可以被中断。

startTransition 的执行状态是可以靠 isPending 来进行追踪的。

`useId`

useId 返回一个页面唯一的 ID 值，不需要额外引入生成 uuid 的库来防止组件 id 重复。

闲聊

工作中的失落

最近因为涉及到响应式设计的开发，才发现整个公司之前都是为移动和PC分别写一套的，而且 Web 也并不是主要的产品，而且设计师对响应式的概念也很模糊，不同尺寸下几乎完全不响应，甚至连组件的表现形式都有天壤之别。

而且产品对响应式的点也不是很关注，顿时有种失语感。

看到一句话是说：“不要把时间浪费在和不专业的团队合作上”，我现在正处于这样的状态。

另外还有一句话是说：”前端开发者一生都在学习“，感觉我从入行开始，每天都在业务开发中不停的去学习新的技术，但目前知道的却还只是冰山一角。

好的公司/开发者

另外一个月的一个项目有使用到 Syncfusion 的 Angular Grid Table 来为甲方开发一个 demo，当时有遇到一个严重的 bug 然后给他们提了工单。最近他们发邮件来追踪这个问题，并说已经在新版本中得到解决，并能为提供单独的更新。

可惜这个项目已经凉了，我也不知道该回什么，可惜了不能买他们的 License。

TIL 带来的思考

Today I learned 对于我来说，可能是一种新的思想，以前的业务中很多东西基本是即用即扔，同一个知识可能会反复查询好几遍。写博客可能是一个记录的方式，但还是会有点重，有些太小的知识点不值得博客这个体量来记录。

所以其实我偷偷开了一个 notion page 去按日期记录我的 TIL ，等某一天相关的知识积累到足够支撑一篇博客时，它又能成为我的灵感和草稿，感觉非常不错！