React

设计 React 组件不仅是编写 JSX，更是一门关于解耦、复用和可维护性的艺术。优秀的组件设计能让项目在规模扩大时依然易于管理。在考虑组件设计时，不仅要关注可复用性，还要警惕过度封装的风险。 ## 核心设计原则 在动手编码前，需要明确并遵循以下核心原则： 1. 单一职责原则 - 理想情况下，一个组件只负责一件事。如果一个组件既负责数据获取、复杂逻辑处理，又负责 UI 渲染，那它就过于“臃肿”了。

众所周知，React 并没有实现细颗粒度的状态更新。同时在副作用中也需要我们手动去管理对应依赖。如常见的 和 等： 这里就需要我们手动的去管理 的依赖，否则 则只会执行一次。而在 Vue 等框架中，则可以自动追踪其依赖： 在 Vue 和 Mobx 等框架中使用的“能自动追踪依赖的技术”被称为“细颗粒度更新”（Fine-Grained Reactivity），这也是许多前端框架响应式的原理。 ##

在 React18 new hooks 中简单了解过并作过一个简单的全局状态，它的参数只有三个： - : 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。 - : 返回当前状态的函数。 - : 在服务端渲染时返回当前状态的函数，可选。 配合上 就可以非常方便的对接外部状态，了解了这个 hook 之后，对自定义的全局

useTransition 返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。它和 CSS 的过渡没有任何关系。useTransition 的主要目的是作用于在复杂的过渡任务时提供一个优先级较低的更新，过渡任务中触发的更新会让更紧急地更新先进行，比如点击。 过渡任务中的更新将不会展示由于再次挂起而导致降级的内容。这个机制允许用户在 React 渲染更新的时候继续与当前内容进行交互

使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 方法，去添加另一个实例。 通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。 在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但

当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。 React Hook Forms 为我们提供了完善的状态管理，并且可以集成到任何组件中去。 你可能会问，如今已经有了像是 MUI、Ant Design 等此类优秀的组件库，为什么还需要使用 React Hook

路由不仅仅只是网络的代名词，它更像是一种表达路径的概念。与网络中的路由相似，前端中的页面路由也是带领我们前往指定的地方。 ## 现代前端的 Web 应用路由 时代在变迁，过去，Web 应用的基本架构使用了一种不同于现代路由的方法。曾经的架构通常都是由后端生成的 HTML 模板来发送给浏览器。当我们单击一个标签导航到另一个页面时，浏览器会发送一个新的请求给服务器，然后服务器再将对应的页面渲染好发过来