SolidJS信号更新失效：深入理解引用比较与UI渲染机制

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

// 初始数据（通常来自props或外部）
const initialOptionsData = [
    {
        title: "ReactJs",
        subtitle: "A front-end framework for building views on the web",
        selected: false
    },
    {
        title: "SolidJS",
        subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
        selected: false
    },
    {
        title: "MumboJumboJS",
        subtitle: "null",
        selected: false
    }
];

export default function CheckboxArea(props) {
    // 使用传入的props.options初始化信号
    const [options, setOptions] = createSignal(props.options);

    function onClickListener(index: number) {
        // 方案一：创建新数组并更新内部对象
        // 使用函数式更新，确保获取到最新的信号值
        setOptions(prevOptions => {
            // 1. 创建数组的浅拷贝，以获得新的数组引用
            const newOptions = [...prevOptions];
            // 2. 更新特定索引处的对象。为了更彻底的不可变性，
            //    最好也创建该对象的浅拷贝并修改其属性。
            newOptions[index] = {
                ...newOptions[index], // 复制原有对象属性
                selected: !newOptions[index].selected // 切换selected状态
            };
            return newOptions; // 返回新的数组引用
        });

        // 另一种更简洁的函数式更新方式（使用map）：
        // setOptions(prevOptions =>
        //     prevOptions.map((option, i) =>
        //         i === index ? { ...option, selected: !option.selected } : option
        //     )
        // );
    }

    return (
        <div>
            {/* Index组件用于迭代数组并渲染列表项 */}
            <Index each={options()}>{(each_option, index) =>
                <div
                    onClick={() => onClickListener(index)}
                    style={{ cursor: 'pointer', padding: '5px', border: '1px solid #eee', marginBottom: '5px' }}
                >
                    {/* 根据selected状态显示不同内容 */}
                    <Show when={each_option().selected}>
                        <span style={{ fontWeight: 'bold', color: 'blue' }}>✅ {each_option().title}</span>
                    </Show>
                    <Show when={!each_option().selected}>
                        <span>{each_option().subtitle}</span>
                    </Show>
                </div>
            }</Index>
        </div>
    );
}

// 渲染组件到DOM
render(() => <CheckboxArea options={initialOptionsData} />, document.getElementById("app")!);

import { createSignal } from "solid-js";

export default function CheckboxArea(props) {
    // 禁用相等性检查
    const [options, setOptions] = createSignal(props.options, { equals: false });

    function onClickListener(index: number) {
        const op = options(); // 获取当前数组引用
        op[index].selected = !op[index].selected; // 直接修改数组内部元素
        setOptions(op); // 传递相同的引用，但因为equals: false，仍会触发更新
    }

    // ... 渲染逻辑与之前相同 ...
}