最近,我发现使用useRef的方法对我来说非常陌生. UseRef(uuid())--它是生成稳定id的有效方式,还是应该避免的方式?

推荐答案

它将生成一个稳定的id,但在它当前的形式中,它将在每个渲染周期调用uuid().在这里,它可能不是什么大事,但想象一下,如果它是一个沉重的功能.将其称 for each 渲染周期可能会影响性能.相反,您可以考虑使用useEffect挂钩来分配ref值.

示例:

const idRef = useRef();

useEffect(() => {
  idRef.current = uuid();
}, []);

您还可以创建一个getter函数,该函数返回当前ref值,并仅在必要时创建它.

示例:

const idRef = useRef();

const getId = () => {
  if (!idRef.current) {
    idRef.current = uuid();
  }
  return idRef.current;
};

How to Create Expensive Objects Lazily

Reactjs相关问答推荐

自动化幻灯片放映以防止React中重复过多的正确方法是什么

ReferenceError:未在Redux组件中定义窗口

react 路由导航不工作,但手动路由工作

XChaCha20-Poly1305的解密函数

NextJS如何正确保存添加到购物车中的产品会话

不同步渲染

react ';S使用状态不设置新状态

试图从Amazon-Cogito-Identity-js模拟CogitoUser.authateUser,并将其获取为未定义的S

react -无法获取函数的最新参数值

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

我无法通过 useContext 显示值

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别?我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗?

ReactJS 动态禁用按钮

如何避免在 react useEffect 上滚动时出现小的延迟?

更新和删除功能不工作 Asp.net MVC React

Cypress ,重试不再附加到 DOM 的元素

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

ReactJS:按钮启用禁用更改 colored颜色

为什么这两个 div 的渲染方式不同?

错误未捕获的错误:[App] 不是 组件. 的所有子组件必须是