非Node.js构建网站引入React时，如何在函数组件中使用Hooks？

以下方案完全对齐React官方《将React添加至网站》的渐进式引入模式，全程不需要本地配置Node.js构建环境，不编写任何类组件，可直接嵌入现有存量网站使用：

一、基础引入配置 #

在现有网站的HTML文档中按顺序加载三类公共资源，全程无需本地npm安装依赖：

• React 核心运行库：提供函数组件、Hooks的基础运行能力
• ReactDOM 渲染库：负责将组件挂载到页面原有DOM节点上
• 浏览器端Babel转译脚本：支持直接在HTML内编写JSX语法，跳过本地编译流程

注意：所有包含JSX语法、Hooks逻辑的自定义脚本块，必须添加 type="text/babel" 属性，否则浏览器会将JSX识别为原生语法直接报错。生产环境可替换为对应资源的压缩版本减少加载体积。

二、函数组件的定义与挂载 #

全程不使用类组件，函数组件的定义逻辑和本地构建环境下的写法完全一致：

1. 首先在页面上为React组件预留独立挂载节点，例如普通的<div id="demo_mount"></div>，React仅会管控节点内部的DOM，不会影响页面原有静态内容。
2. 编写纯函数形式的组件，接收props作为入参，返回合法的JSX结构，不需要继承任何React父类、不需要实现render方法。
3. 通过ReactDOM的createRoot方法，将组件渲染到预留的挂载节点上。

示例代码：

// 定义基础函数组件
function Welcome(props) {
  return <h3>欢迎访问，{props.siteName}</h3>
}

// 完成组件挂载
ReactDOM.createRoot(
  document.getElementById('demo_mount')
).render(
  <Welcome siteName="存量业务站点" />
)

三、Hooks在纯CDN引入模式下的使用规则 #

纯CDN引入的是完整版本的React核心库，和本地构建环境的功能完全对等，所有官方提供的Hooks均可正常使用，仅需要注意适配浏览器全局环境的特殊写法：

• 所有Hooks必须从全局React对象上解构或直接调用，不能像模块化开发那样直接写裸的useState、useEffect，否则会触发未定义报错。
• 严格遵守Hooks的通用规则：仅在函数组件的顶层作用域调用，不要在条件判断、循环、普通嵌套函数中调用Hooks，否则会打乱React的Hooks调用顺序。

常用Hooks的使用示例：

function InteractiveCounter() {
  // 调用useState管理组件内部状态
  const [clickCount, setClickCount] = React.useState(0)

  // 调用useEffect管理组件副作用，替代类组件的生命周期逻辑
  React.useEffect(() => {
    // 组件挂载/依赖值变化时执行的逻辑
    document.title = `累计点击：${clickCount}次`

    // 组件卸载时执行的清理逻辑
    return () => {
      document.title = '站点默认标题'
    }
  }, [clickCount])

  return (
    <div>
      <p>你已经点击了{clickCount}次按钮</p>
      <button onClick={() => setClickCount(clickCount + 1)}>
        触发计数
      </button>
    </div>
  )
}

// 挂载带Hooks逻辑的函数组件
ReactDOM.createRoot(
  document.getElementById('counter_mount')
).render(<InteractiveCounter />)

常见踩坑提醒 #

• 如果页面加载体积要求极高，可以完全移除Babel转译脚本，将所有JSX语法替换为原生React.createElement的写法，函数组件和Hooks的使用逻辑完全不变，仅书写复杂度会提升。
• 多组件同时挂载时，各个组件的状态、副作用逻辑是完全隔离的，和本地构建环境下的行为没有差异，不会出现状态串扰。
• 不要在函数组件中混用类组件的API，比如this.setState、componentDidMount，所有状态管理、副作用逻辑均通过对应Hooks实现即可。

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