如何拆分React函数式组件的逻辑？有哪些推荐的文件拆分方案？

你规划的这个目录结构是React生态中非常成熟的按职责拆分的组件组织方式，对学习阶段理解关注点分离原则非常友好，以下是每个文件的具体分工和可落地的实践规则：

首先是你提到的目录结构整理：

components/header/
├── index.js        // 组件统一导出入口
├── header.jsx      // 组件UI渲染逻辑
├── style.scss      // 组件专属样式
├── header.test.js  // 组件单元测试
└── useHeader.js    // 组件专属自定义Hook

各文件编写规范 #

• index.js
  仅负责统一导出，不要添加任何业务逻辑，好处是外部引用组件时路径更简洁，后续调整内部文件结构也不会影响外部引用。示例写法：

  // 导出默认组件
  export { default as Header } from './header.jsx'
  // 有需要对外暴露的Hook、类型定义也可以在这里统一导出
  // export * from './useHeader.js'
  

  外部引用时直接写import { Header } from '@/components/header'即可，不需要写全路径到jsx文件。
• header.jsx
  只保留和UI渲染强相关的代码：JSX结构、样式绑定、事件绑定，所有业务逻辑都抽离到useHeader.js中，保持JSX部分的简洁可读性。示例写法：

  import useHeader from './useHeader'
  import './style.scss'
  
  const Header = () => {
    const { username, handleLogout, showNotification } = useHeader()
    return (
      <header className="header-container">
        <span className="username">{username}</span>
        <button onClick={handleLogout}>退出登录</button>
        {showNotification && <span className="msg-badge" />}
      </header>
    )
  }
  
  export default Header
  

• useHeader.js
  存放所有Header组件的业务逻辑：状态管理、接口请求、路由跳转、工具函数、事件处理逻辑，和UI完全解耦后如果后续有其他组件需要相同逻辑可以直接复用。示例写法：

  import { useState, useEffect } from 'react'
  import { useRouter } from 'react-router-dom'
  import { logoutApi, getUserInfoApi } from '@/api/user'
  
  const useHeader = () => {
    const [username, setUsername] = useState('')
    const [showNotification, setShowNotification] = useState(false)
    const router = useRouter()
  
    // 获取用户信息
    useEffect(() => {
      const fetchUserInfo = async () => {
        const res = await getUserInfoApi()
        setUsername(res.data.nickname)
        setShowNotification(res.data.unreadCount > 0)
      }
      fetchUserInfo()
    }, [])
  
    // 登出逻辑
    const handleLogout = async () => {
      await logoutApi()
      localStorage.removeItem('token')
      router.push('/login')
    }
  
    return {
      username,
      showNotification,
      handleLogout
    }
  }
  
  export default useHeader
  

• style.scss
  所有组件样式都放在这里，建议给组件加唯一的根类名（比如上面示例的.header-container），所有子样式都嵌套在根类名下面，避免全局样式冲突，如果使用CSS Module可以不用额外加前缀。
• header.test.js
  优先测试组件的对外行为而非内部实现，比如测试用户名是否正常渲染、点击登出按钮是否触发对应逻辑、未读消息标记是否正常展示即可，不用过度纠结测试覆盖率，学习阶段可以先从最简单的渲染测试开始写。

新手实践建议 #

• 不用为了拆分硬拆分，如果是逻辑非常简单的小组件，不用强行把Hook拆成单独文件，优先保证代码可读性。
• 通用的工具函数、全局类型定义不要放在组件目录里，统一放到根目录的utils、types文件夹下管理。
• 拆分逻辑的时候可以遵循“UI层只做渲染、Hook层做逻辑处理”的原则，写多了慢慢就能找到合适的拆分粒度。

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