使用Preact结合htm实现切换功能时出现渲染异常的问题

我在测试Preact结合htm的使用时，发现实现一个简单的切换功能时渲染无法正常工作。点击按钮后控制台的状态值已经变化，但页面显示没有更新。

我的代码 #

HTML代码 #

<script type="importmap">
    {
      "imports": {
        "preact": "https://esm.sh/preact@10.19.2",
        "preact/": "https://esm.sh/preact@10.19.2/",
        "htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
      }
    }
</script>

<link href="~/styles/product-recommendation-new.css" type="text/css" rel="stylesheet" />

<div id="product-recommendation-new-flow" class="container-fluid">

</div>

<script type="module" src="~/scripts/product-recommendation.js"></script>

JavaScript代码 #

const Toggler = () => {
    const [toggle, setToggle] = useState(true);
    console.log(toggle);
    return html`<div> <h1>Count: ${toggle ? 'true' : 'false'}</h1> <button onClick=${e=>setToggle(!toggle)}>toggle</button> </div> `;
};
render(html`<${Toggler} />`, document.getElementById('product-recommendation-new-flow'));

现象 #

• 初始化时：页面显示Count: true，控制台输出true
• 点击按钮后：控制台输出false，但页面依然显示Count: true

问题出在缺少必要的导入和htm初始化步骤，以下是修正后的代码：

// 导入Preact核心API和htm
import { useState, render } from 'preact';
import htm from 'htm/preact';

// 将htm与Preact的render绑定，生成可用的html模板函数
const html = htm.bind(render);

const Toggler = () => {
    const [toggle, setToggle] = useState(true);
    console.log(toggle);
    return html`
        <div>
            <h1>Count: ${toggle ? 'true' : 'false'}</h1>
            <button onClick=${() => setToggle(!toggle)}>toggle</button>
        </div>
    `;
};

render(html`<${Toggler} />`, document.getElementById('product-recommendation-new-flow'));

原因说明 #

1. 未导入核心API：useState和render是Preact的核心函数，必须显式导入才能触发状态更新后的重渲染逻辑，未导入时状态变化无法同步到页面。
2. 未初始化htm：htm需要通过htm.bind(render)绑定到Preact的渲染函数，才能将模板字符串转换为Preact可识别的虚拟DOM元素，否则模板无法响应状态变化。

内容的提问来源于stack exchange，提问作者suhail c