javascript - 在哪里为 React 功能组件声明辅助功能。里面还是外面?
问题描述
我正在构建一个<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>
);
}
我的问题是:如您所见,到目前为止,我在我的React 组件函数的主体<BasicForm>
中声明了我使用的所有函数 ( onChange
, onBlur
, onFocus
, setInputInitialState
, validateAllFields
, checkValidationAndSubmit
) 。BasicForm
这是最佳做法吗?如果我使用类,那么这些函数可能是我的BasicForm
类的方法。但是自从我改用 hooks 并摆脱了大多数类后,我总是对将辅助函数放置在我的 React 组件函数体内部或外部存有疑虑。对此有最佳做法吗?
当辅助函数可能需要我的主函数中的一些变量或状态时,我总是可以在调用它们时将它们作为参数传递(如果它们在外部声明)。
如果我在我的BasicForm
功能之外声明它们,我会获得或失去任何东西吗?请记住,这是一个与 Webpack 捆绑在一起的模块。
解决方案
如果函数不依赖于 props 或 state,那么最好在组件函数之外定义它。如果它确实依赖于道具或状态,那么在你的组件函数中定义它通常是有意义的,但是如果你将函数作为道具传递给子组件,那么你应该考虑使用useCallback
(尽管这通常只会增加价值,如果子组件被记忆)。
当函数依赖于 props 或 state 时,如果你将函数移出组件并传递参数,你最终需要将该调用包装在另一个函数中(例如()=>helperFunc(prop1, someState)
),以便将其作为 prop 传递给子组件. 如果函数很大,您可能仍希望以这种方式将其从组件中拉出,但这归结为样式偏好。
有关更多信息useCallback
,请在此处查看我的回答:Trouble with simple example of React Hooks useCallback
推荐阅读
- ios - SwiftUI - 表单中的 NavigationLink 单元格在详细信息弹出后保持突出显示
- firebase - FIreStore 规则 - 带有 2 个参数的集合的安全规则
- rest - x-www-form-url-encoded POST 请求不被接受
- laravel - Laravel 图表 - 在图表中显示值
- asp.net-core - 如何在 identityserver4 中没有用户名和密码的情况下从令牌端点获取令牌?
- python - 修改 A* 算法以使其处理不同的单元格值
- jenkins - 如何在 Jenkinsfile 中调用函数
- javascript - 如何在 javascript 的数组中获取 [] 而不是 {}
- deep-learning - RNN 中的梯度累积
- angular - 如何在 Angular Frontent 构建后更改后端 IP,并使用 nginx 托管?