reactjs - Reactjs 分离 UI 和业务逻辑

Question

我是新来的反应，我发现看着充斥着大量函数和变量初始化以及 UI 的组件的眼睛很痛。有可能将它们分开吗？

而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？

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

   return ( 
       ...
   )
}

标签： reactjs

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

应用组件

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;

使用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 实用程序函数而不是钩子，那么您将无法访问其他钩子，该函数内的上下文。