如何将业务逻辑划分在一个React组件中？

Question

我使用 React.js 构建我的水疗应用程序。我使用函数式风格来制作我的组件。随着业务逻辑越来越大，功能必然会越来越多。所以我尝试分成多个组件。因为即使只是一个组件，也很难将许多代码放在一个文件中。

然而，这也有明显的局限性。在复杂组件的情况下，除了用户直接调用的函数之外，还存在大量的事件回调函数。根据组件的大小，有时很难将所有逻辑都写在一个jsx文件中，所以我想根据需要将代码分成不同的文件。（就像c#部分类一样）

然而，这并不容易。举个例子，我们假设回调函数是其他文件的外部函数，并导入到该组件的 jsx 文件中并使用。但似乎组件状态、道具信息和调度函数也应该作为参数传递给函数。这看起来很麻烦，但除此之外，我不知道如何从另一个文件中的函数访问该组件的状态、道具、调度函数。）

//For example of callback function
const onHoldButtonClicked = (state, props, dispatch, event) =>
{
    ~~~
}
//For example of normal function
const updateValidUser = (state, props, dispatch, userInfo, data) =>
{
    let id = userInfo.id;
    if(id == data.passID)
    {
         if(props.valid == 10)
            dispatch({action: 'ChangeUser', user: id});
    }
}

在React中，当一个组件中的逻辑变大时，如何划分逻辑（函数）？（一般情况）即使分成几个组件，一个大组件也必然有很多功能。

Answer 1

我建议将逻辑提取到钩子中，并将这些钩子放入它们自己的文件中。

钩子.js

const useAwesomeHook = () => {
  const [someState, setSomeState] = useState("default");

  const myCoolFunction = useCallback(() => {
    console.log('do smth cool', someState);
  }, [someState]);

  return myCoolFunction;
};

export default useAwesomeHook;

main.js

import useAwesomeHook from './hook';

const Main = ({ someProperty }) => {
  const myCoolFunction = useAwesomeHook(someProperty);

  return <button onClick={myCoolFunction}>Click me</button>;
};