React useState与SolidJS createSignal的差异、优势及性能心智模型对比

核心差异 #

1. 取值方式 #

• React useState：直接使用返回的状态变量（如{counter}），变量值随组件重渲染更新为最新状态。
• SolidJS createSignal：必须调用返回的 getter 函数（如{count()}），每次调用都能获取当前最新的信号值。

2. 更新触发机制 #

• React：调用状态更新函数（如setCounter）会触发整个组件重新渲染，组件函数会再次执行，所有JSX都会重新计算。
• SolidJS：调用信号更新函数（如setCount）仅触发依赖该信号的DOM节点更新，组件函数仅在初始化时执行一次，后续不会重复运行。

3. 更新逻辑的写法 #

• React useState：推荐用函数式更新（setCounter(c => c + 1)）避免闭包导致的旧值问题；直接传值时，若新值依赖旧值，可能因闭包获取到过期状态。
• SolidJS createSignal：既可以直接传新值（setCount(count() + 1)），也支持函数式更新；由于每次调用count()都能拿到最新值，闭包问题几乎不存在。

4. 初始值处理 #

• React useState：若初始值是高成本计算表达式，必须用函数形式（useState(() => expensiveCalc())），否则每次组件渲染都会重复计算。
• SolidJS createSignal：无论初始值是直接值还是函数，都只会在组件初始化时执行一次，无需额外优化。

SolidJS Signal 是否具有优势？ #

是的，多数场景下Signal有显著优势：

• 细粒度更新：无需组件重渲染，仅更新关联的DOM节点，避免React中全组件渲染带来的冗余计算。
• 更少的优化代码：不需要React.memo、useMemo、useCallback这类优化API，组件仅初始化一次，不会重复创建函数或计算值。
• 自动依赖追踪：响应式依赖自动追踪，无需像React的useEffect/useMemo那样手动维护依赖数组，减少漏写依赖导致的bug。

性能对比 #

• React：性能瓶颈来自组件重渲染，当组件包含大量DOM节点或复杂计算时，局部状态变化也会触发全组件渲染，需手动优化才能避免性能损耗。
• SolidJS：采用细粒度更新机制，组件初始化后不再执行，状态变化仅影响关联DOM节点，在复杂UI、大量状态交互场景下性能远优于React，且无额外优化成本。

心智模型优劣 #

React useState #

• 优势：基于组件渲染周期的模型，熟悉前端渲染流程的开发者容易理解组件生命周期与状态流转。
• 劣势：需要处理重渲染、闭包陷阱、依赖数组维护等问题，新手易出现因闭包获取旧状态、漏写依赖导致的bug，心智负担较重。

SolidJS createSignal #

• 优势：基于响应式信号的模型，组件仅初始化一次，状态变化直接触发依赖更新，无需关注渲染周期，闭包问题几乎不存在，心智模型更简洁直观。
• 劣势：需要习惯函数式取值的方式，长期使用React的开发者需转换思维；且组件仅执行一次，所有副作用需通过createEffect等响应式API处理，与React副作用写法有差异。

示例代码 #

React useState 示例 #

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

SolidJS createSignal 示例 #

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

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

render(() => <App />, document.getElementById("root"));

内容的提问来源于stack exchange，提问作者Thanirmalai Nagappan