React组件链式函数拆分至独立文件且保留状态访问权限的方案

问题背景 #

我有一个React组件，内部包含多个链式调用的函数，这些函数需要访问组件的state。为了精简组件文件，我想把这些函数拆分到独立的.js文件中，但拆分后函数会失去对组件state的访问权限。

当前可正常运行的组件代码：

// SomeComponent.js
import React, { useState, useEffect } from 'react';

export default function SomeComponent() {
  const [name, setName] = useState("")
  const [accessToken, setAccessToken] = useState("")

  useEffect(() => {
    console.log(name)
    func1()
  })

  function func1() {
    console.log(name)
    func2()
  }

  function func2() {
    console.log(name)
    func3()
  }

  function func3() {
    setAccessToken("1234")
  }

  return(
    <>
      <h1>{name}</h1>
      <button onClick={func3}>Click Me</button>
    </>
  )
}

我不想通过逐层传递state和setter的方式（项目中有约10个链式函数，这种方式太繁琐），也不想用类实例化或新组件的方式，希望找到更简洁的方案，实现将func1、func2、func3定义在独立文件中，同时保留对组件state的访问权限。

解决方案 #

方案1：闭包封装函数集合 #

通过工厂函数创建闭包，将state和setter注入到函数中，让拆分后的函数能直接访问组件的state：

newFile.js

export function createStateBoundFunctions(name, setAccessToken) {
  function func1() {
    console.log(name)
    func2()
  }
  
  function func2() {
    console.log(name)
    func3()
  }

  function func3() {
    setAccessToken("1234")
  }

  return { func1, func2, func3 }
}

SomeComponent.js

import React, { useState, useEffect } from 'react';
import { createStateBoundFunctions } from './newFile';

export default function SomeComponent() {
  const [name, setName] = useState("")
  const [accessToken, setAccessToken] = useState("")

  // 每次state更新时重新生成绑定函数，确保获取最新state
  const { func1, func3 } = createStateBoundFunctions(name, setAccessToken)

  useEffect(() => {
    console.log(name)
    func1()
  }, [name, func1]) // 添加依赖项避免无限循环

  return(
    <>
      <h1>{name}</h1>
      <button onClick={func3}>Click Me</button>
    </>
  )
}

方案2：自定义Hook（推荐） #

将state逻辑和相关函数封装成自定义Hook，完全符合React Hooks设计规范，同时实现代码拆分：

useTokenHandlers.js

import { useState } from 'react';

export default function useTokenHandlers() {
  const [name, setName] = useState("")
  const [accessToken, setAccessToken] = useState("")

  function func1() {
    console.log(name)
    func2()
  }
  
  function func2() {
    console.log(name)
    func3()
  }

  function func3() {
    setAccessToken("1234")
  }

  return {
    name,
    setName,
    accessToken,
    func1,
    func3
  }
}

SomeComponent.js

import React, { useEffect } from 'react';
import useTokenHandlers from './useTokenHandlers';

export default function SomeComponent() {
  const { name, func1, func3 } = useTokenHandlers()

  useEffect(() => {
    console.log(name)
    func1()
  }, [name, func1])

  return(
    <>
      <h1>{name}</h1>
      <button onClick={func3}>Click Me</button>
    </>
  )
}

说明 #

• 闭包方案适合只拆分函数、不想迁移state的场景，需注意在useEffect中添加正确的依赖项。
• 自定义Hook方案更符合React组件逻辑封装思路，将相关state和操作函数完全隔离，可读性和复用性更强，优先推荐。

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