沧州做网站的大公司,婚礼策划公司,易点科技,网站创建快捷方式React18 新特性
自动批量更新State
定义
import { useState } from reactconst [x, setX] useState(0)渲染赋值
setX(5)并发CM模式
同步不可中断更新机制 - 异步可中断并行 状态更新 机制
React18 默认开启并发模式
详见代码
ReactDOM 的引入
import ReactDOM fr…React18 新特性
自动批量更新State
定义
import { useState } from reactconst [x, setX] useState(0)渲染赋值
setX(5)并发CM模式
同步不可中断更新机制 - 异步可中断并行 状态更新 机制
React18 默认开启并发模式
详见代码
ReactDOM 的引入
import ReactDOM from react-dom/clientrender
const root ReactDOM.createRoot(document.getElementById(root))root.render(App /)useTransition
startTransition 函数可以将 state 更新标记为 非阻塞的 transition
import { startTransition } from react;function TabContainer() {const [tab, setTab] useState(about);function selectTab(nextTab) {startTransition(() {setTab(nextTab);});}// ...
}useTransition 是一个让你在不阻塞 UI 的情况下来更新状态的 React Hook
isPending 标志告诉你是否存在待处理的转换
startTransition 函数 允许你将状态更新标记为转换状态
function TabContainer() {const [isPending, startTransition] useTransition();const [tab, setTab] useState(about);function selectTab(nextTab) {startTransition(() {setTab(nextTab);});}// ...
}
除了将任务变成非紧急还有节流的效果
useDeferredValue
useDeferredValue 是一个 React Hook可以让你延迟更新 UI 的某些部分
在新内容加载期间显示旧内容。表明内容已过时延迟渲染 UI 的某些部分
useDeferredValue(value)
value你想延迟的值可以是任何类型
import { useState, useDeferredValue } from react;function SearchPage() {const [query, setQuery] useState();const deferredQuery useDeferredValue(query);// ...
}严格模式
React 提供了 “严格模式”在严格模式下开发时它将会调用每个组件函数两次。通过重复调用组件函数严格模式有助于找到违反这些规则的组件。
严格模式在生产环境下不生效因此它不会降低应用程序的速度。如需引入严格模式你可以用 React.StrictMode 包裹根组件。一些框架会默认这样做
index.js 页面
const root ReactDOM.createRoot(document.getElementById(root))root.render(React.StricModeApp //React.StricMode
)Suspense组件的变化
Suspense 允许你显示一个退路方案fallback直到它的子组件完成加载
Suspense fallback{Loading /}SomeComponent /
/SuspenseReact18 可以不设置 fallback
其他
如果React 返回一个空组件 React17 只允许返回 null 。React18 也允许返回undefined。
