Javascript 在何处声明React功能组件的辅助功能。里面还是外面？

我正在构建一个

组件，用于在我的应用程序中构建表单。它应该处理提交、验证，还应该跟踪输入状态（如触摸、脏等）

因此，它需要一些函数来完成这一切，我一直在想，什么是放置这些声明的最佳位置（关于代码组织和性能优化，考虑React和JavaScript最佳实践）

我正在使用React 16.8挂钩并与Webpack绑定

到目前为止，我得到的是：

BasicForm.js

/* I moved those validating functions to a different file
because I thought they are helpers and not directly related 
to my BasicForm functionality */

import { validateText, validatePassword, validateEmail } from './Parts/ValidationHelpers';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // These are functions to handle these events
  function onChange(event) {...}
  function onBlur(event) {...}
  function onFocus(event) {...}

  // This function creates the initial state for each form input
  function setInputInitialState(inputProps) {...}

  // This functions does what it name says
  function validateAllFields() {...}

  // This one also
  function checkValidationAndSubmit() {...}

  return(
    <FormContext.Provider value={{
      onBlur: onBlur,
      onFocus: onFocus,
      onChange: onChange,
      inputs: inputs,
      setInputInitialState: setInputInitialState
    }}>
      <form onSubmit={onSubmit} method='POST' noValidate>
        {props.children}
      </form>
    </FormContext.Provider>
  );

}

/*我将这些验证函数移到了另一个文件中
因为我认为他们是帮手，没有直接关系
我的基本表单功能*/
从“/Parts/ValidationHelpers”导入{validateText、validatePassword、validateEmail}；
功能基本形式（道具）{
const[inputs，setInputs]=useState（{}）；
const[isSubmitting，setIsSubmitting]=useState（false）；
//这些是处理这些事件的函数
函数onChange（事件）{…}
函数onBlur（事件）{…}
函数onFocus（事件）{…}
//此函数为每个表单输入创建初始状态
函数setInputInitialState（inputProps）{…}
//此函数按其名称执行
函数validateAllFields（）{…}
//这个也
函数checkValidationAndSubmit（）{…}
返回(
{props.children}
);
}

我的问题是：正如您所看到的，到目前为止，我正在声明我的

使用的所有函数（

onChange

，

onBlur

，

onFocus

，

setInputInitialState

，

validatealFields

，

checkValidationAndSubmit

）在my

基本表单的体内

这是最好的做法吗？如果我使用类，那么这些函数可能就是我的
BasicForm
类的方法。但是，自从我改为使用钩子并摆脱了大多数类之后，我总是怀疑是否应该将辅助函数放在React components函数体的内部或外部。这方面有最佳实践吗

当辅助函数可能需要一些来自主函数的变量或状态时，我可以在调用它们时将它们作为参数传递（如果它们在外部声明）

如果我在
BasicForm
函数之外声明它们，我会得到或失去任何东西吗？请记住，这是一个与Webpack捆绑在一起的模块。
如果功能不依赖于道具或状态，那么最好在组件功能之外定义它。如果它依赖于道具或状态，那么在组件函数中定义它通常是有意义的，但是如果您将函数作为一个道具传递给子组件，那么您应该考虑使用（虽然这通常只在子组件是值时添加值）。
当函数依赖于props或state时，如果将函数移出组件并传递参数，则最终需要将该调用包装到另一个函数中（例如，
（）=>helperFunc（prop1，someState）
），以便将其作为prop传递给子组件。如果函数很大，您可能仍然希望以这种方式将其从组件中拉出，但这取决于样式首选项

有关
useCallback
的更多信息，请参见我的回答：