我正在构建一个<BasicForm>组件，该组件将用于在我的应用程序中构建表单。它应该处理提交、验证，还应该跟踪输入状态(如触摸、脏污等)。
因此，它需要一些函数来完成所有这些工作，我一直想知道放置这些声明的最佳位置是什么(关于代码组织和性能优化，考虑到 React 和 JavaScript 最佳实践)。
我正在使用 React 16.8 钩子并与 Webpack 捆绑在一起。
到目前为止，这是我得到的：
基本形式.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>
);
}
我的问题是：如您所见，到目前为止，我正在声明我的<BasicForm>使用的所有函数(onChange，onBlur，onFocus，setInputInitialState，validateAllFields，checkValidationAndSubmit)在我的BasicFormReact组件函数的主体中。
这是最佳实践吗？如果我使用类，这些函数可能是我BasicForm类的方法。但是由于我改用钩子并摆脱了大多数类，我总是怀疑将辅助函数放在 React 组件函数的主体内部或外部。是否有最佳实践？
当辅助函数可能需要我的主函数中的一些变量或状态时，我总是可以在调用它们时将它们作为参数传递(如果它们在外部声明)。
如果我在BasicForm函数之外声明它们，我会获得或失去任何东西吗？请记住，这是一个与 Webpack 捆绑在一起的模块。
如果函数不依赖于 props 或状态，那么最好在组件函数之外定义它。如果它确实依赖于 props 或状态，那么在组件函数中定义它通常是有意义的，但是如果您将函数作为 prop 传递给子组件，那么您应该考虑使用useCallback(尽管这通常只有在子组件被记住时才增加价值)。
当函数依赖于 props 或状态时，如果将函数移出组件并向其传递参数，则最终需要将该调用包装在另一个函数中(例如()=>helperFunc(prop1, someState))，以便将其作为道具传递给子组件。如果函数很大，您可能仍然希望以这种方式将其从组件中拉出，但这仅归结为样式首选项。
有关useCallback的更多信息，请参阅我的答案：React Hooks useCallback 的简单示例的问题