React.js 如何实现UI与业务逻辑分离 新手实操方法咨询

完全可以分离，React生态有非常成熟的拆分方案，常用的两种方式如下：

1. 用自定义Hook抽离带状态的业务逻辑 #

自定义Hook是React原生支持的逻辑复用/拆分方案，专门用于处理依赖React状态、副作用的逻辑。

步骤1：新建单独的Hook文件 #

比如新建useMyComponent.js存放所有业务逻辑：

// useMyComponent.js
import { useState } from 'react';

export default function useMyComponent() {
  const [data, setData] = useState('');
  
  const someFunc = () => {
    // 原有的业务逻辑写在这里
  };

  // 其余100多行初始化、状态操作、方法逻辑都放在当前文件

  // 仅向组件暴露需要用到的状态和方法
  return {
    data,
    someFunc
    // 其他需要在UI层用到的内容按需要返回
  };
}

步骤2：组件内引入Hook使用 #

组件文件仅保留UI渲染逻辑：

// MyComponent.jsx
import useMyComponent from './useMyComponent';

function MyComponent() {
  const { data, someFunc } = useMyComponent();

  return (
    // 这里仅写UI渲染相关代码
  )
}

2. 抽离无状态纯工具函数 #

如果部分逻辑不依赖React的状态、useEffect等Hook，只是纯数据计算、格式转换、校验类的无状态逻辑，可以直接抽到单独的工具文件中：

// myComponentUtils.js
// 数据格式化方法
export const formatDisplayData = (rawData) => {
  // 处理逻辑
  return processedData;
}

// 输入校验方法
export const validateFormInput = (inputValue) => {
  // 校验逻辑
  return checkResult;
}

需要使用时直接在Hook或者组件文件中导入调用即可。

注意事项 #

• 自定义Hook必须以use开头，React才能正常识别并应用Hook的相关规则校验
• 如果逻辑是多个组件通用的，可以把对应的Hook、工具函数抽到公共目录下复用，不用每个组件单独维护
• 不用为了拆分而拆分，和UI强绑定的轻量逻辑留在组件内也可，过度拆分反而会增加维护成本

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