能否将React的useState逻辑拆分至独立JS文件，JSX代码单独存放？

当然可行，这正是React自定义Hook的设计初衷之一——把组件的状态逻辑和UI渲染代码拆分开，让代码更清爽、好维护。不过你给出的示例代码没法直接运行，因为useState作为React Hook，必须在React函数组件或者自定义Hook的顶层调用，不能直接放在普通JS文件的全局作用域里。

修正后的实现示例 #

1. 抽离状态逻辑的自定义Hook文件（useInputState.js）

import { useState } from 'react';

export const useInputState = () => {
  const [value, setValue] = useState("");
  const [disableBtn, setDisableBtn] = useState(true);

  const triggerChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);
    // 补充判断逻辑，比如输入非空时启用按钮
    setDisableBtn(inputValue.trim().length === 0);
  };

  // 返回组件需要用到的状态和方法
  return {
    value,
    disableBtn,
    triggerChange
  };
};

2. 存放JSX的组件文件（Sample.jsx）

import { useInputState } from './useInputState';
// 根据实际情况引入Button组件，比如原生button或UI库组件
import { Button } from 'antd';

const SampleApp = () => {
  // 调用自定义Hook，获取状态和方法
  const { value, disableBtn, triggerChange } = useInputState();

  return (
    <>
      <input type="text" onChange={triggerChange} value={value} />
      <Button disabled={disableBtn}>提交</Button>
    </>
  );
};

export default SampleApp;

为什么这样能行？ #

自定义Hook完全遵循React的Hook规则：

• 只在函数的顶层调用（不能在条件、循环里）
• 只在React函数组件或其他自定义Hook中调用

它可以把任意复杂的状态逻辑封装起来，然后通过返回值把状态、操作方法暴露给组件，组件只需要专注于UI渲染，完美实现逻辑与UI的分离，还能方便地在多个组件之间复用这套状态逻辑。

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