useState 和 createSignal 有什么区别？

Question

React的useState和Solid JS的createSignal有什么区别？

Solid 的信号比 React 的状态有优势吗？

import React, { useState } from "react";

function App() {
    const [counter, setCounter] = useState(0);
    return (
      <div>
        <p>{counter}</p>
        <button onClick={() => setCounter((counter) => counter + 1)}>
          Click Me
        </button>
      </div>
    );
}

import React, { useState } from "react";

function App() {
    const [counter, setCounter] = useState(0);
    return (
      <div>
        <p>{counter}</p>
        <button onClick={() => setCounter((counter) => counter + 1)}>
          Click Me
        </button>
      </div>
    );
}

哪一种在性能和心智模型方面更好？

Answer 1

Solid 和 React 从外观上看是一样的，因为它们都使用 JSX 来渲染 UI 层，并且它们的 API 名称相似，但实际上没有任何共同点。

它们具有完全不同的前提、不同的性能特征和不同的执行模型。

React 使用 VDOM，每次状态更新都会触发整个 VDOM 树的重建。但积极的差异化和修补可以最大限度地减少需要完成的工作。React 中的悬停组件状态位于组件内部。因此，它试图保持状态完整，同时打破保持状态的结构。因此，它充满了怪癖和不必要的杂耍。不仅是库，用户空间代码也反映了这个缺点。

它不仅可以保持状态，还可以防止重新渲染给您带来麻烦。由于 VDOM 会导致下游分支中任何位置的每次状态更新都会重新渲染，即使您已经进行了比较和批处理。假设您的应用程序中有套接字连接。如果您不采取积极措施，您将在每次状态更新时创建新的连接。因此，在 React 的组件中，有很多事情需要考虑，也有很多事情需要牢记。

在 Solid 中，即使状态存在于组件内部并且组件在应用程序加载时渲染一次，状态也与 UI 层隔离。如果组件访问其主体中的信号值，则会自动订阅状态更改。

每个信号都在 Solid 中保存自己的订阅者列表。更新信号的值会通知其订阅者，包括组件。组件可以作为一个整体重新渲染，或者可以只更新所需的位（例如innerText值），或者什么都不做。当组件收到更新通知时要做什么取决于组件。

React 组件编译为createElement函数调用，并且 props 保留为对象。在solid中，组件被编译成函数调用。这使得常规范围规则的使用更加可靠。换句话说，在实体组件中可以访问它们的外部作用域，但对于 React 来说却不然。

这带来的一个优点是，状态可以保留在组件边界内部和外部。任何状态更新都会通过函数调用触发重新运行，并且小部分会得到更新。

在 Solid 中，组件的作用是组织代码，仅此而已。状态更新时不会重新渲染。所有这些特性使得 Solid 组件非常高性能。

唯一的缺点是您不能在 Solid 组件中使用对象破坏，因为您依赖函数调用来保持反应性。让我举个例子来进一步澄清这一点：

假设子组件访问count复合状态的属性：

const [state, setState] = createSignal({ count: 0 });

当被调用时它会获取值state()。获取计数值的唯一方法是调用state(). 在这里您可以通过以下方式获取状态值：

const count = state().count;
const { count } = state();

两者最初都有效，但在第二个中，您将为局部变量赋值。由于状态更新时不会重新渲染，因此在 Solid 中您将停留在初始值。请记住，状态更新不会触发 Solid 中的重新渲染。但有解决方法和插件可以解决这个问题。

在 React VDOM 中重新渲染，意味着您再次执行代码，因此是否解构并不重要，因为整个代码块将在每次状态更新时重新执行。

React 并不是真正的响应式、重新渲染，因为 VDOM 给了你这种感觉，而 Solid 却是。

还有很多差异，但我认为这足以回答您的问题。

Solid 由于其执行模型而速度很快。

Solid 还具有清晰的心智模型。代码很简单，足以解读正在发生的事情。

但对于 React 来说，你在编程时不仅需要密切了解并牢记组件的逻辑，还需要了解其所有子组件，因为它们也可能导致重新渲染。

假设您在组件内部 3 层深处导入了一个子组件。该子组件内的任何更新都会触发其任何父组件中的重新渲染。这就是为什么 React 非常强调纯度。因此，您不仅需要了解并牢记手头的组件，还需要了解其所有子组件。导入一个有问题的组件，你就有麻烦了。

在 Solid 中，如果导入有问题的组件，错误将仅限于该组件，并且影响是隔离的，因为它无法触发重新渲染。