Reactjs UI 和业务逻辑分离

Question

我是 React 新手，看到充满大量函数和变量初始化以及 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

代码看起来像这样。

钩

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} />
   )
}

帮手

const doSomething = () => {}

编辑

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

结构

Directory
- App
- Counter
- useCounter
- helper

应用程序组件

MyComponentDirectory
 - useCustomHook
 - Component
 - helper

计数器组件

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} />
   )
}

辅助功能

const doSomething = () => {}

这是Codesandbox中的工作示例

注意：如果您创建一个简单的 Javascript util 函数而不是钩子，那么您将无法访问其他钩子以及该函数内的上下文。

Answer 2

我自己使用的一种常见方法是将业务逻辑分离到自己的文件中myComponentHelper.js

这也将使测试函数变得更容易，因为如果不将其作为参数传递并返回更改，它将无法使用和更改反应状态。

myComponent/
  myComponent.jsx
  myComponentHelper.js
  myComponentTest.js

myComponent/
  myComponent.jsx
  myComponentHelper.js
  myComponentTest.js

// myComponent.js

import { someFunc } from './myComponentHelper';

function MyComponent() {
    const [data, setData] = useState('');
    
    const x = someFunc(data);

    return ( 
        ...
    )
}

// myComponentHelper.js

export const someFunc = (data) => {
    //do something.
    return something;
}