React 19 除了 RSC 等新功能,还优化了什么?

提示:记录工作中遇到的需求及解决办法

文章目录

  • 前言
  • 01. ref 作为 prop
  • 02. Context 作为 provider
  • 03. refs 的清理函数
  • 04. useDeferredValue 的初始值
  • 05. 支持文档元数据
  • 06. 支持样式表
  • 07. 支持异步脚本
  • 08. 支持预加载资源
  • 09. 支持自定义元素
  • 总结


前言

React 19 正式发布,新功能看下面这张图就欧了:????
在这里插入图片描述
除了 RSC 等新功能,React 官方博客1 还分享了基于旧版的 DX(开发体验)优化和其他改进。


提示:以下是本篇文章正文内容,下面案例可供参考

01. ref 作为 prop

React 19 可以访问 ref 作为函数组件的 prop:

function MyInput({
    placeholder, ref}) {
   
  return <input placeholder={
   placeholder}    ref={
   ref} />
}

<MyInput ref={
   ref} />

新版函数组件不再需要 forwardRef

⛔ 注意,传递给类的 refs 不会作为 props 传递,因为它们引用了组件实例。

02. Context 作为 provider

React 19 可以把 <Context> 渲染为 provider,而不是 <Context.Provider>

const ThemeContext = createContext('');

function App({
    children}) {
   
  return (
    <ThemeContext value="dark">
      {
   children}
    </ThemeContext>
  );  
}

新的 Context provider 可以使用

上一篇:画图,matlab,