一文详解preact的高性能状态管理Signals

Signals提供了一种描述状态的方式，确保即使在复杂的应用程序中也能保持快速。它基于响应式原则，针对虚拟DOM进行了独特实现，能够确保状态更新保持快速。Signals的核心在于，一个signal就是一个具有.value属性的对象，当其值发生变化时，访问signal.value的组件会自动更新。无论你的应用程序中有多少个组件，这都能确保状态更新保持快速。Signals默认是很快的，背后的主要思想是传递一个signal对象，而不是一个值。当一个signal的value属性改变时，signal本身保持不变，因此可以跳过昂贵的渲染工作，直接跳到访问signal.value的特定组件。这让我们能够做出更快的渲染。Signals背后的关键原则包括默认情况下是懒惰的，只观察和更新目前在某处被使用到的signal；最佳更新；最佳的依赖性跟踪；直接访问。

Signals可以在组件内部或外部使用，它与hooks不一样，也可以和hooks、类组件一起使用。Signals的性能是翻转的，它不是通过记忆化或选择器来选择性能，而是默认就是快速的。Signals提供了细粒度状态更新的好处，无论该状态是全局的、通过props或上下文传递的，还是在某个组件的局部。Signals解决了全局状态管理和上下文混乱的问题，使得状态更新更加高效。

在确认了正确的状态基元后，我们开始将其与Preact进行连接。我们希望直接在组件中访问状态，而不是使用选择器或封装函数。经过原型设计，我们最终找到了一个实现的方法。我们可以在组件中直接访问signal的.value属性，这使得代码更直观，不需要任何额外的精神体操。我们的代码可以跑得更快吗？我们本可以在这里停下来，但这是Preact团队：我们需要看看我们能把Preact的集成推动到什么程度。在上面的Counter例子中，我们尝试直接将signal传入JSX，使得signal的value能够直接呈现为文本，并在发生变化时自动更新。这也适用于props。

如果你对Signals感兴趣并想直接进入学习，请到我们的文档中查看。我们很乐意听到你将如何使用它们。请记住，不要急于切换到Signals。hooks将继续被支持，而且它们与Signals一起使用也很好！我们建议逐渐尝试Signals，从一些组件开始，以适应这些概念。

您可能感兴趣问答

Collapsible

热门标签

热点问答