React 18 这次是真的来了
3月8日 React 官方发布了 「How to Upgrade to the React 18 Release Candidate[1]」 文章。文中提到了 RC 版本已经发布以及如何升级到新版本的指南。
根据 React 官方去年发布的计划来看,发布 RC 版本也就意味着正式版马上就要来了,大概延迟 2 ~ 4 周。
本文会着重介绍一些指南中和大家息息相关的点以及 React 18 有什么好用的新特性,如果你想了解更详细内容的话还是推荐各位自行阅读官方文章。
如何安装新版本
安装新版本需要大家指定为 rc 版本。
yarn add react@rc react-dom@rc
有哪些常见 API 的变动
首先 ReactDOM.render
这个 API 在新版本中不被支持了,需要我们修改为如下代码:
// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);
// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);
这个代码变更应该是每个项目都得做的。另外 createRoot
还会将整个应用变成并发模式(concurrent mode),后面笔者会聊到这块。
其它还有一些别的改动,比如 unmountComponentAtNode
变成了 root.unmount
:
// Before
unmountComponentAtNode(container);
// After
root.unmount();
删除了 render
函数的回调:
// Before
const container = document.getElementById('app');
ReactDOM.render(<App tab="home" />, container, () => {
console.log('rendered');
});
// After
function AppWithCallbackAfterRender() {
useEffect(() => {
console.log('rendered');
});
return <App tab="home" />
}
const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(<AppWithCallbackAfterRender />);
还有水合(hydrate)相关的变更,也就是 SSR 层面的:
// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);
// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.
SSR 相关的除了这个变更之外还有一些别的内容,比如 API 的新增、废弃及限制,对这方面关心的读者可以自行阅读 文章[2]。
好用的新特性
首先是批量更新的优化。这个功能是帮助做性能优化的,可以将多次状态变更整合到一次,这样只需触发一次 UI 渲染,但是在 React 18 之前这个功能只适用于事件处理中。
如今在新版本中,无论状态更新在写在定时器、Promise 还是原生事件中,批量更新都会被触发。
// Before React 18
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// 更新 UI 一次
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// 更新 UI 两次
}, 1000);
// After React 18
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// 更新 UI 一次
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// 更新 UI 一次
}, 1000);
最后一个是和并发模式相关的内容,我们终于可以手动调节更新优先级了!
先简单介绍下优先级相关的东西,这个其实和 React 的调度息息相关。调度的时候内部会将不同的更新设置为不同的优先级,优先级高的更快执行,优先级低的更新可以被更高优先级所打断从而实现延后更新。
因此我们可以通过这个机制去调节某些状态更新被触发的时机,从而使别的更新更快被触发,也就是 UI 渲染的更及时。
那么我们如何手动调节呢?其实很简单:
import { startTransition } from "react"
startTransition(() => {
// 状态更新
})
引用链接
[1]
How to Upgrade to the React 18 Release Candidate: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html[2]
文章: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-server-rendering-apis
- EOF -
关注「程序员的那些事」加星标,不错过圈内事
点赞和在看就是最大的支持❤️
关注公众号:拾黑(shiheibook)了解更多
[广告]赞助链接:
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/
随时掌握互联网精彩
- 1 习近平同普京出席中俄文化年开幕式 4990883
- 2 周杰伦哭了 4988283
- 3 博主连云港遇鬼秤 疑遭市场方抢手机 4858543
- 4 构建网上网下同心圆 4754675
- 5 范闲一死叔圈大乱 4653101
- 6 普京访华 欢迎仪式有几个特别安排 4551877
- 7 张若昀:这五年尽力在保养了 4488933
- 8 庆余年2广告好多 4393814
- 9 考生花30万内定第一名系谣言 4254071
- 10 老人监控下呼唤孙女后自缢身亡 4129144