如何在已开发完成的现成站点中添加并使用react-hooks？

这个报错的核心原因是useState属于React框架内置导出的API，你没有正确关联到React对象上的对应属性导致的，根据你引入React的方式不同，对应解决方法如下：

情况1：通过<script>标签引入React CDN资源（现成站点最常用的引入方式） #

用这种方式引入后，React会自动挂载到全局window.React对象下，所有Hooks都是这个对象的子属性，你可以任选以下两种写法解决：

• 直接通过React对象调用Hooks
  把你之前的代码修改为：
  const [state, setState] = React.useState('name')
• 先从全局React对象中解构出需要的Hooks，再直接调用

  // 提前解构需要的Hooks，后续可以直接使用
  const { useState, useEffect, useRef } = React;
  const [state, setState] = useState('name');
  

注意：请确保你引入的React版本 ≥ 16.8.0，Hooks是React 16.8版本才推出的能力，低于该版本无法使用，你可以在浏览器控制台输入React.version查看当前引入的React版本。

情况2：通过ES模块import语法引入React #

如果你的站点支持ES模块化写法，直接在引入的时候提取对应的Hooks即可：

// 写法1：引入时直接解构
import React, { useState } from '你的React资源对应路径';

// 写法2：全量引入后再解构
import * as React from '你的React资源对应路径';
const { useState } = React;

额外提醒：所有Hooks的调用必须放在React函数组件内部，放在普通JS逻辑中会触发Hooks调用规则的相关报错。

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