Reactjs 分离 UI 和业务逻辑

Question

我是新来的，我发现看到充满大量函数和变量初始化以及 UI 的组件时眼睛很痛。是否可以将它们分开？
而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？

function MyComponent() {
    const [data, setData] = useState('');
    const someFunc = () => {
        //do something.
    };
    ... some 100-liner initializations

   return ( 
       ...
   )
}

Answer 1

是的，这是可能的，这被称为 Separation of concern .
您可以创建您的组件结构，如下所示。

MyComponentDirectory
 - useCustomHook
 - Component
 - helper

代码看起来像这样。
Hook

const useCustomHook = () => {

const [value, setValue] = useState('');
    const handleClick = (value) => {
        setValue(value)
        //do something.
    };
    ... some 100-liner initializations/business logic, states, api calls. 

return {
value, 
handleClick,
... // Other exports you need. 
} 
}

export default useCustomHook; 

组件

function MyComponent() {
    const {
     value, 
     handleClick, 
    ... // Other imports 
    } = useCustomHook() 

   return ( 
       <Element value={value} onClick={handleClick} />
   )
}

helper

const doSomething = () => {}

编辑
这是使用 Separation of concern 的 React 计数器应用程序的详细示例
结构

Directory
- App
- Counter
- useCounter
- helper

应用组件

import Counter from "./Counter";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

计数器组件

import useCounter from "./useCounter";

const Counter = () => {
  const { count, increaseCount, decreaseCount } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <div>
        <button onClick={increaseCount}>Increase</button>
        <button onClick={decreaseCount}>Decrease</button>
      </div>
    </div>
  );
};

export default Counter;

使用计数器 Hook

import { useState } from "react";
import numberWithCommas from "./helper";

const useCounter = () => {
  const [count, setCount] = useState(9999);

  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  return {
    count: numberWithCommas(count),
    increaseCount,
    decreaseCount
  };
};

export default useCounter;

辅助函数

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

export default numberWithCommas;

这是 Codesandbox 中的工作示例
注意:如果您创建一个简单的 Javascript util 函数而不是钩子(Hook)，那么您将无法访问该函数内的其他钩子(Hook)和上下文。