登录
首页 >  文章 >  前端

React 要点:您可能缺少的功能

来源:dev.to

时间:2024-08-23 20:33:52 474浏览 收藏

目前golang学习网上已经有很多关于文章的文章了,自己在初次阅读这些文章中,也见识到了很多学习思路;那么本文《React 要点:您可能缺少的功能》,也希望能帮助到大家,如果阅读完后真的对你学习文章有帮助,欢迎动动手指,评论留言并分享~

React 要点:您可能缺少的功能

react 巩固了其作为构建动态和响应式用户界面的首选库的地位。凭借其声明式方法和基于组件的架构,react 简化了开发现代应用程序的复杂过程。然而,与任何强大的工具一样,即使对于经验丰富的开发人员来说,也有一些功能和最佳实践经常被忽视。

在本博客中,我们将深入研究 react 的一些被忽视的方面,这些功能可以增强您的开发工作流程、优化性能并帮助您编写更干净、更高效的代码。

1.布局钩子(uselayouteffect)

每个人都听说过 useeffect 钩子,它可以让您在依赖项发生变化时编写有效的代码。 uselayouteffect 是 useeffect 钩子的一个版本,每当浏览器重新绘制屏幕时就会触发它,它在许多场景中都很有用。

工具提示

import { usestate, useref, uselayouteffect } from 'react';

function tooltip() {
  const ref = useref(null);
  const [tooltipheight, settooltipheight] = usestate(0);

uselayouteffect(() => {
    const { height } = ref.current.getboundingclientrect();
    settooltipheight(height);
}, []);
// ...

此代码在屏幕渲染之前检查工具提示是否能够适合屏幕,因此会自行重新排列。

详细解释请访问 https://react.dev/reference/react/uselayouteffect

2. 出口(react router)

虽然不是 react 原生的一部分,但在 react 中管理路由时,react router 是一个非常著名且有用的库。随着它的流行,它的文档中提到的许多功能都被忽视了。

插座的使用方法

曾经为您的项目设计过仪表板吗?顶部栏和侧边栏元素始终保持不变,并且只有页面的一部分在不同路线之间发生变化?这正是嵌套路由和插座概念发挥作用的地方

function dashboard() {
  return (
    <div>
      <h1>dashboard</h1>
      <outlet />
    </div>
  );
}

function app() {
  return (
    <routes>
      <route path="/" element={<dashboard />}>
        <route path="messages" element={<dashboardmessages />} />
        <route path="tasks" element={<dashboardtasks />} />
      </route>
    </routes>
  );
}

父路由路径=“/”表示占位符或您想要加载动态组件的页面布局,上面示例中的 dashboard() 将只有一个标题,页面上的以下内容将取决于我们所在的路线是 /messages 或 /tasks。我们还可以使用outletcontext为所有子页面创建上下文

阅读更多内容:https://reactrouter.com/en/main/components/outlet

3.加载优化(react.suspense + await)

react 在 react router 的帮助下支持加载器和后备,无需使用任何其他库,这里是一个关于如何使用它们的简单示例。

function Book() {
  const { book, reviews } = useLoaderData();
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          resolve={reviews}
          errorElement={
            <div>Could not load reviews ?</div>
          }
          children={(resolvedReviews) => (
            <Reviews items={resolvedReviews} />
          )}
        />
      </React.Suspense>
    </div>
  );
}

注意:await 需要在 <react.suspense> 或 <react.suspenselist> 父级内部渲染以启用后备 ui。

概括

我们探索了一些经常被忽视但强大的 react 功能,这些功能可以显着增强您的开发过程。我们从嵌套路由和 outlet 组件的使用开始,这简化了应用程序中子路由的处理。接下来,我们深入研究了布局钩子,特别是 uselayouteffect,它对于在浏览器重绘之前执行更新至关重要,确保 ui 交互更流畅。我们还讨论了 react 的 await 和 suspense 标签的使用,它们有助于更有效地管理异步操作,使您能够构建更快、响应更灵敏的用户界面。通过理解和利用这些功能,您可以编写更干净、更高效的 react 代码,并针对性能和可扩展性进行了优化。

今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~

声明:本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>