如何设计 React 组件
设计 React 组件不仅是编写 JSX，更是一门关于解耦、复用和可维护性的艺术。优秀的组件设计能让项目在规模扩大时依然易于管理。在考虑组件设计时，不仅要关注可复用性，还要警惕过度封装的风险。 ## 核心设计原则 在动手编码前，需要明确并遵循以下核心原则： 1. 单一职责原则 - 理想情况下，一个组件只负责一件事。如果一个组件既负责数据获取、复杂逻辑处理，又负责 UI 渲染，那它就过于“臃肿”了。
TOPIC COLLECTION / 主题手记
React
沿着一个主题，拾起散落的思考。
让有关的文字，在这里慢慢生长。
已加载 7 篇文章，按最新排序。
最近写下
细颗粒度更新与自动依赖收集
众所周知，React 并没有实现细颗粒度的状态更新。同时在副作用中也需要我们手动去管理对应依赖。如常见的 和 等： 这里就需要我们手动的去管理 的依赖，否则 则只会执行一次。而在 Vue 等框架中，则可以自动追踪其依赖： 在 Vue 和 Mobx 等框架中使用的“能自动追踪依赖的技术”被称为“细颗粒度更新”（Fine-Grained Reactivity），这也是许多前端框架响应式的原理。 ##
使用 useSyncExternalStore 构建属于自己的全局状态
在 React18 new hooks 中简单了解过并作过一个简单的全局状态，它的参数只有三个： - : 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。 - : 返回当前状态的函数。 - : 在服务端渲染时返回当前状态的函数，可选。 配合上 就可以非常方便的对接外部状态，了解了这个 hook 之后，对自定义的全局
React 18 中的一些新 hooks
useTransition 返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。它和 CSS 的过渡没有任何关系。useTransition 的主要目的是作用于在复杂的过渡任务时提供一个优先级较低的更新，过渡任务中触发的更新会让更紧急地更新先进行，比如点击。 过渡任务中的更新将不会展示由于再次挂起而导致降级的内容。这个机制允许用户在 React 渲染更新的时候继续与当前内容进行交互
Three.js 中的物体围绕运动
使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 方法，去添加另一个实例。 通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。 在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但