Javascript 如何将主组件的逻辑和状态拆分为多个文件

昨天我问过如何才能“清理”我的App.js文件，并在不同的文件中分离逻辑、数学或效果函数，这样我的主文件就会很好阅读。对于如何使用自定义挂钩，我没有什么答案，他们给了我一个例子，但我真的不明白。我的计算器应用程序经过了几次代码更改，与我第一次请求时提供的代码相比

我试着去理解它是如何工作的，或者去阅读，但是没有任何帮助

第一件对我来说没有意义的事情是这个。我试过一些基本的定制钩子。到目前为止，为了实现这一点，我创建了文件OrangeButtonHook.js，其中包含

import React, { useState } from 'react';

export default function useOrangeButtonHook(operator){
const [whichOrange,setWhichOrange] = useState({
    whichOrange : 'there should be some text'
})

return whichOrange;
}

在我的App.js文件中，我只是简单地导入它，并按照他们在回答我之前的问题时向我展示的那样使用它

import useOrangeButtonHook from './Components/OrangeButtonHook';

const {whichOrange, setWhichOrange} = useOrangeButtonHook();
console.log(whichOrange) //this works ,and in my console is 'there should be some text'

但为了更好地理解，我尝试将它重命名为对我更有意义的名称

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

export default function useOrangeButtonHook(operator){
const [whichOrange,setWhichOrange] = useState({
    button : 'there should be some text'
})

return whichOrange;
}

但当我尝试在App.js中调用它时，我的控制台显示“undefined”

 const {whichOrange, setWhichOrange} = useOrangeButtonHook();
 console.log(whichOrange) //throws undefined

所以我试着这样称呼它

 const {whichOrange, setWhichOrange} = useOrangeButtonHook();
 console.log(whichOrange.button) //this works throws lot of errors

我不明白问题出在哪里，也不明白应该如何将这些函数分离到不同的文件中。问题是，例如，当单击操作员按钮时，该函数应该添加对按钮有效的类

function turnOnOrange(operator){
  setNumber(prevState => ({
    ...prevState,
    whichOrange:operator
  }))
  operator.className = 'orangeActivated';
}

function turnOffOrange(){
 number.whichOrange.className = 'orangeDisabled';
 setNumber(prevState => ({
   ...prevState,
   whichOrange:null
  }))
}

但这些函数在getOperator（）函数中调用，当用户单击operator按钮时调用该函数

 function getOperator(e){
   let operator = e.target;
     setNumber(prevState => ({
       ...prevState,
       operator:operator.name
     }))

    if(!number.whichOrange){
      turnOnOrange(e.target);
    }

    if(number.whichOrange){
      number.whichOrange.className='orangeDisabled';
      turnOnOrange(e.target)
    }
 }

几乎所有的操作和操作都是相互“链接”的。codesandbox的链接，这样您就可以看到整个计算器应用程序代码，并了解更多我所说的内容

---

如果有人向我解释或告诉我它是如何工作或如何做的，我将非常感激。谢谢。

首先，使用自定义钩子时，您将收到它返回的内容。您正在返回

whichrange

，这是一个对象

{按钮：“应该有一些文本”}

。您正试图从中提取

{whichrange，setwhichrange}

，而上面提到的对象中不存在该值

其次，定制钩子与使用React.useState是等价的，这是没有意义的。此外，定制钩子还用于提取公共逻辑，以便在多个地方使用

如果你想让代码更干净，你应该从将App.js中的逻辑分块开始。然后，您应该尝试提取公共逻辑，以便尽可能减少代码重复。接下来，您可以尝试简化逻辑，这样代码中的if语句就更少了

例如，看看这部分代码：

if（number.operator==“+”）{
结果=第一个数字+第二个数字；
setNumber（（prevState）=>({
…国家，
第一个数字：结果，
第二个号码：“，
结果:结果,，
操作员：“，
显示：PrettyNumber（结果），
numToReset：是的，
}));
resizeFinalNumber（PrettyNumber（结果））；
//减去
}else if（number.operator==“-”）{
结果=第一个数字-第二个数字；
setNumber（（prevState）=>({
…国家，
第一个数字：结果，
第二个号码：“，
结果:结果,，
操作员：“，
显示：PrettyNumber（结果），
numToReset：是的，
}));
resizeFinalNumber（PrettyNumber（结果））；
//倍增
}else if（number.operator==“x”）{
结果=第一个数字*第二个数字；
setNumber（（prevState）=>({
…国家，
第一个数字：结果，
第二个号码：“，
结果:结果,，
操作员：“，
显示：PrettyNumber（结果），
numToReset：是的，
}));
resizeFinalNumber（PrettyNumber（结果））；
}

通过不太使用setNumber，您可以轻松地使其变得更短、更简单：

if（number.operator==“+”）{
结果=第一个数字+第二个数字；
}else if（number.operator==“-”）{
结果=第一个数字-第二个数字；
}else if（number.operator==“x”）{
结果=第一个数字*第二个数字；
}
setNumber（（prevState）=>({
…国家，
第一个数字：结果，
第二个号码：“，
结果:结果,，
操作员：“，
显示：PrettyNumber（结果），
numToReset：是的，
}));
resizeFinalNumber（PrettyNumber（结果））；

在每个if语句中调用完全相同的函数是没有意义的。因此，我建议从这些东西开始（消除代码重复，将与React无关的函数提取到单独的文件中），直到后来才尝试使用定制挂钩来适应它们，或者分离不能只是简单函数的公共逻辑

再举一个例子：

//您可以在多个位置使用此函数
常量getOperationResult=（第一个数字、第二个数字、运算符）=>{
让结果；
如果（number.operator==“+”）{
结果=第一个数字+第二个数字；
}else if（number.operator==“-”）{
结果=第一个数字-第二个数字；
}else if（number.operator==“x”）{
结果=第一个数字*第二个数字；
}
返回结果
}
const result=getOperationResult（第一个数字、第二个数字、操作）；
setNumber（（prevState）=>({
…国家，
第一个数字：结果，
第二个号码：“，
结果:结果,，
操作员：“，
显示：PrettyNumber（结果），
numToReset：是的，
}));
resizeFinalNumber（PrettyNumber（结果））；

对于初学者，我要求您至少删除100行代码，并使每个文件的长度最多为100行；）

谢谢你的回答：）我不确定我是否达到了那个水平，所以我可以在100行以内完成。这就是我询问如何“清理”App.js文件的原因。但我会看一看，并试图摆脱可重复使用的代码@Naszos