React Stack Snippet运行异常排查及正确编写方法

• 模块导入写法不兼容：你在HTML部分已经用script标签引入了marked的CDN资源，此时marked会直接注册为全局变量可直接调用，但JS部分又写了import { marked } from "https://cdn.skypack.dev/marked@4.0.16"的ES模块导入语句。Stack Snippets的默认脚本运行环境不支持这种直接拉取远程CDN模块的导入写法，会直接抛出加载错误，导致后续React代码完全不执行。
• 冗余依赖版本冲突：HTML中引入了react-bootstrap的next预览版本，该版本最低要求React 18运行环境，但你引入的React/ReactDOM是16.6.3版本，存在隐性版本兼容问题，且你的代码全程没有用到任何react-bootstrap提供的组件，属于无效引入。
• 存在无意义的性能消耗：componentDidUpdate生命周期中没有做新旧状态对比，只要组件触发更新就会重复往localStorage写入相同内容，虽然不会直接导致报错，但属于不必要的性能开销。

1. 直接删除JS面板最顶部的marked导入语句即可，全局引入的marked库可以直接正常调用。
2. 删除HTML面板中引入react-bootstrap的script标签，消除版本兼容风险。
3. （可选优化）给localStorage写入逻辑加一层状态判断，避免重复写入：

componentDidUpdate(prevProps, prevState) {
  if (prevState.text !== this.state.text) {
    localStorage.setItem('text', this.state.text);
  }
}

按上述步骤修改后，代码即可在Stack Snippets中正常运行，效果和Codepen上完全一致：左侧文本框输入Markdown内容时右侧实时渲染预览，刷新页面后会保留用户之前输入的内容。

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