与 React.js 的对比

以下各节面向从 React.js Web 框架迁移过来或熟悉它的开发者。 我们将比较 React.js 应用开发中的模式与 Slint。

注意

Slint 中没有 Web 浏览器来渲染 UI。没有 DOM 或 shadow DOM。

组件生命周期管理

React.js 采用的模型是：在状态变化时，组件会被销毁并重新创建。默认情况下，这还包括销毁元素的所有子组件，然后这些子组件都需要重新创建。为了管理性能，需要谨慎使用 useMemo() 和 useCallback() 来避免不必要的重新渲染。尽管由于 React 编译器的出现，这种需求已经减少，但仍然有必要理解这个模型，以理解 React 应用的行为方式。

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

状态

React.js 将那些会更新并重新渲染组件的属性称为 state。它们是可选加入的，默认情况下不会被追踪。

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;        }    }}

经典的计数器示例也展示了一些关键差异。首先声明 count 属性，然后从 useState hook 中解构出 count 值和 setCount() 函数。请注意，'count' 不能直接访问，必须通过 setCount() 进行更新。

然后使用计数器按钮更新 count 属性，并为了确保它正确更新，必须依赖 setCount() 返回的 currentCount 值来更新这些值。因为使用 setCount(count + 1) 可能在状态稍后更新的更复杂场景中引起问题。

虽然 Slint 的示例看起来并不简单多少，但它完成同样的工作并且坑更少。由于 Slint 中的所有内容默认都是响应式的，因此该属性以一种统一的方式声明。该语言具有强类型，对于数字，既有 float 也有 int。该属性也可以直接安全修改，在本例中也可以使用 += 运算符。