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 ( 
 
Dashboard
  
 ); } function App() { return (  }> } /> } />   ); }

父路由path="/"表示占位符或您想要加载动态组件的页面布局，上例中的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 ( 
 
{book.title}
 
{book.description}
 }> Could not load reviews ?
 } children={(resolvedReviews) => (  )} />