为什么初始化后修改JSX变量视图不更新？如何实现预期更新效果？

• React组件的视图更新仅会在响应式状态（state）变更触发重渲染时同步更新，你用普通let声明的displayText不是React的响应式状态，修改它不会触发组件重新渲染，页面自然还是第一次渲染时的初始值。
• 你的useEffect回调是在组件首次渲染完成后才执行的，此时组件的渲染逻辑已经跑完，修改普通变量不会让组件重新执行渲染函数，视图自然不会更新。
• 你的示例代码中useEffect里的字符串赋值还存在语法错误，缺少了闭合的单引号，实际运行会直接报错。
• 额外说明：如果你预期是把字符串里的HTML标签解析成DOM节点，直接用{displayText}插入JSX的话React会自动转义标签，只会当成纯文本展示，不会渲染为真实DOM。

你需要用React内置的useStateHook声明响应式状态，修改状态时调用配套的set方法触发组件重渲染，就能同步更新视图：

import { useState, useEffect } from 'react';

// 用useState声明响应式状态，配套返回修改状态的set方法
const [displayText, setDisplayText] = useState('<div>Hello World!</div>');

useEffect(() => {
    // 调用set方法更新状态，会自动触发组件重渲染
    setDisplayText('<div>Bye World!</div>');
}, []);

// 场景1：仅展示纯文本，HTML标签会直接当成文本输出
// return <div>{displayText}</div>

// 场景2：需要解析HTML字符串为DOM节点，使用dangerouslySetInnerHTML属性
return <div dangerouslySetInnerHTML={{__html: displayText}}></div>

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