React.js：可以在功能组件之外分配useState（）吗？

Question

是否存在允许在功能组件外部分配useState的语法？到目前为止，我已经尝试过了，但是没有用：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  useEffect(() => setStateData("from useEffect"), []);

  return <div className="App">{stateData}</div>;
}

const [stateData, setStateData] = App.useState("default value"); // fails
// const [stateData, setStateData] = App.prototype.useState("default value"); // also fails

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox：

Answer 1

  

是否存在允许在功能组件之外分配useState的语法？

如果您看看docs and Rules of Hooks

  

仅来自React函数的调用挂钩

     

不要从常规JavaScript函数中调用Hook。相反，您可以：

     

✅从React函数组件中调用Hook。
  ✅从自定义挂钩中调用挂钩（我们将在下一页中了解它们）。

所以...不，您不能在功能组件之外使用useState。

Answer 2

您可以在组件外部使用useState的{​​{1}}函数，方法是将其分配给变量。只需确保在卸载组件时将其清除即可。

update