纯HTML页面使用React的useState等钩子不生效问题求助

问题排查 #

• Hook未从React对象中引用：useState、useEffect都是React暴露的内置API，在全局script引入的场景下，需要通过React.useState、React.useEffect的方式调用，直接写会报变量未定义错误。
• useEffect使用逻辑错误：useEffect的返回值只能是清理副作用的函数，不能返回JSX元素，你想实现点赞后显示提示的逻辑，应该直接写在组件的return渲染逻辑里，不要放在useEffect中。
• 代码中混用了未编译的JSX语法：你在useEffect里写的<div>You liked this</div>是JSX语法，没有引入Babel编译的情况下，浏览器无法识别这类语法，必须统一用你之前定义的e（也就是React.createElement）来创建元素。
• React版本存在兼容风险：Hook是React 16.8版本才新增的特性，你引入的react@16可能拉取到低于16.8的旧版本，建议指定明确的兼容版本避免问题。

修复方案 #

调整后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <p>React is loaded as a script tag.</p>
    <!-- 组件挂载容器 -->
    <div id="like_button_container"></div>
    <!-- 引入明确支持Hook的React18稳定版 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 加载自定义组件 -->
    <script src="like_button.js"></script>
  </body>
</html>

调整后的like_button.js代码 #

'use strict';

const e = React.createElement;

const LikeButton = () => {
  const [liked, setLiked] = React.useState(false);

  // 直接在渲染逻辑里处理点赞后的展示
  if (liked) {
    return e('div', null, 'You liked this');
  }

  return e('button', { onClick: () => setLiked(true) }, 'Like');
};

// React18使用createRoot完成渲染
const root = ReactDOM.createRoot(document.querySelector('#like_button_container'));
root.render(e(LikeButton));

如果要继续使用React16版本，只需要将引入地址改为https://unpkg.com/react@16.14.0/umd/react.development.js和对应版本的react-dom，保留原来的ReactDOM.render写法即可。

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