React 发生了什么变化？-js教程-PHP中文网

React 发生了什么变化？

Barbara Streisand

发布： 2024-12-10 19:56:11

原创

481 人浏览过

React nimalar o

作为开发人员，您需要及时了解所使用的技术。最近，React 19 版本进入稳定状态。在这篇文章中，您将熟悉版本 19 中出现的更改。

这篇文章分为两部分，第一部分是关于版本 19 中的新增内容以及 React 中改进了哪些部分。我们先来看看新闻发布之前有哪些改进。

将 ref 作为 props

我们必须使用forwardRef将

refs作为props传递，这是多余的。里面写的代码是：

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

登录后复制

现在可以直接将 ref 作为 props 给出

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

//...
<MyInput ref={ref} />

登录后复制

ref 的清理函数

如果在组件中使用了 ref，则当组件从 UI 卸载时必须清除该 ref。这对于高效的内存管理和避免意外情况非常重要。在以前的版本中，这是写在useEffect的返回部分：

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

登录后复制

19版本更改后，上述代码写为：

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

登录后复制

为 useDeferredValue 分配初始值的选项

你已经知道为什么要给出initialValue，所以你可以进入下一节）

元数据支持

要将元元素（例如

meta、标题）分配给所需页面，您必须使用 useEffect 或像 React-helmet 这样的库。

版本 19 添加了直接使用这些标签的功能。

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

登录后复制

渲染 React 组件时，

自动将元标记包装到

元素中。

支持样式

这个版本还重点优化了样式，增加了适时下载样式的功能以及优先级属性。该属性控制样式添加到 DOM 的顺序。样式在其依赖组件安装之前加载。

支持异步脚本

就像样式一样，异步脚本可以在所需的时间下载。加载样式和异步脚本的组件不必担心在多个地方使用它们时重新下载它们，因为它们在第一次加载时就会被缓存）

预加载资源

尽快下载资源对网站性能有很好的影响。 React 19 中宣布了新的 API 来利用此功能。这些是以下

preinit - 快速下载和使用资源（脚本或模块）；
preload - 提前下载资源，这种情况下不需要快速使用加载的资源（字体、样式）
preconnect - 打开与要加载资源的服务器的连接，这会加快资源加载时间。
prefetchDNS 的工作方式与预连接类似，不同之处在于它会在发出请求之前下载并缓存资源，而无需创建连接。