响应式 vs React.js

与 React.js 的对比

以下各节面向来自 React.js Web 框架或熟悉它的人。我们将对比基于 React.js 的应用开发模式与 Slint。

组件生命周期管理

React.js 的模型是：状态变化时组件会被销毁并重新创建。默认情况下，这还会一并销毁元素的所有子组件，随后这些子组件都需要重新创建。为了管理性能，需要谨慎使用 useMemo() 和 useCallback() 来避免不必要的重新渲染。尽管通过 React Compiler 已降低了这种需求，但要理解 React 应用的行为方式，仍然有必要理解这一模型。

Slint 则简单得多，采用细粒度响应式：组件会更新，但不会被销毁并重新创建。没有与 useMemo() 和 useCallback() 等价的东西，因为它们没有必要。

状态

React.js 会把那些更新并重新渲染组件的属性称为状态。它们是选择性启用的，默认情况下不会被跟踪。

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button
      onClick={() => {
        setCount((currentCount) => currentCount + 1);
      }}
    >
      {count}
    </button>
  );
}

jsx

import { Button } from "std-widgets.slint";

export component Counter {
    property <int> count: 0;
    Button {
        text: count;
        clicked => {
            count += 1;
        }
    }
}

slint

经典计数器示例也展示了关键差异。首先声明了 count 属性，并从 useState 钩子中解构出 count 值和 setCount() 函数。注意，count 不能直接访问，必须通过 setCount() 更新。

随后计数器按钮被用来更新 count 属性，而要确保它被正确更新，必须依赖 setCount() 返回的 currentCount 值来更新数值。因为在更复杂的场景中，如果状态稍后才更新，使用 setCount(count + 1) 可能会引发问题。

虽然 Slint 的示例看起来未必简单多少，但它完成同样的工作，且坑更少。由于 Slint 中的一切默认都是响应式的，属性只需以单一方式声明。该语言具有强类型，对于数字同时提供 float 和 int。属性还可以安全地直接修改，在本例中也因此可以使用 += 运算符。