在哪里为 React 功能组件声明辅助功能。里面还是外面？答案

【问题标题】：Where to declare auxiliar functions for a React functional component. Inside or outside?在哪里为 React 功能组件声明辅助功能。里面还是外面？
【发布时间】：2019-03-25 14:28:13
【问题描述】：

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

因此，它需要一些函数来完成所有这些，我一直想知道放置这些声明的最佳位置是什么（关于代码组织和性能优化，考虑到 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>
  );

}

我的问题是：如您所见，到目前为止，我声明了我的<BasicForm> 使用的所有函数（onChange、onBlur、onFocus、setInputInitialState、validateAllFields , checkValidationAndSubmit) 在我的BasicForm React 组件函数的主体内部。

这是最佳做法吗？如果我使用类，那么这些函数可能是我的 BasicForm 类的方法。但是自从我改用钩子并摆脱了大多数类后，我总是对将辅助函数放置在我的 React 组件函数体内部或外部存有疑虑。有这方面的最佳做法吗？

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

如果我在我的BasicForm 函数之外声明它们，我会得到什么还是失去什么？请记住，这是一个与 Webpack 捆绑在一起的模块。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

如果函数不依赖于 props 或 state，那么最好在你的组件函数之外定义它。如果它确实依赖于 props 或 state，那么在你的组件函数中定义它通常是有意义的，但是如果你将函数作为 props 传递给子组件，那么你应该考虑使用useCallback（尽管这通常只如果子组件是memoized，则添加值。

当函数依赖于 props 或 state 时，如果你将函数移出组件并传递参数，你最终需要将该调用包装在另一个函数中（例如 ()=>helperFunc(prop1, someState)）以便将其传递为子组件的道具。如果函数很大，您可能仍希望以这种方式将其从组件中拉出，但这归结为样式偏好。

有关useCallback的更多信息，请在此处查看我的答案：Trouble with simple example of React Hooks useCallback

【讨论】：