0

我的表格变得非常激烈。大约 20 个输入，包括多个日期选择器、谷歌位置 api、rrule 值等。因为这些输入中很少有可以直接更新而无需经过某种转换。我已经成功地将组件从在生命周期方法中做太多事情的有状态组件转换为（现在使用 formik 来管理值），但我正在尝试确定定义必要辅助函数的最佳方法（例如updatedDateWithTime, formatAddress) 在性能和风格方面，只能想到几个选项。

选项一：函数组件内的函数表达式：

const MyHugeForm = () => {
  const helper1 = () => { console.log("thing1") }
  const helper2 = () => {console.log("thing2") }

  return() {...}
}

选项 2：作为文件中定义的“全局变量”，在函数之外：

helper1() => console.log("thing1");
helper2() => console.log("thing2");

const MyHugeForm = () => {
  return() {...}
}

选项 3：作为子组件内部使用的内联箭头函数（即将每个输入分解为其自己的组件并向下传递道具）

const MyHugeForm = (props) => {
  return() {
    <div> 
      <DateInput startDate={props.startDate} />
      <LocationInput location={props.googleLocation} />
    </div>
  }
}

const DateInput = (props) => {
  <DatePicker onChange={() => console.log("thing1")} />
}

const LocationInput = (props) => {
  <input onChange={() => console.log("thing2")} />
}

在功能组件之外（但在同一个文件中）定义 20 个左右的辅助函数感觉是错误的，但是将它们定义为组件内部的函数表达式似乎更糟，而且这两个选项中的性能更差。就降低 600 行功能组件的复杂性而言，将各个部分分解成子组件感觉像是正确的模式，但是如果子组件最终在他们的渲染中内联定义相同的函数，那实际上不是一样的吗？

4

1 回答 1

1

我的建议是使用一些静态方法创建一个辅助类，您可以在其中将输入的 html 事件作为参数传递：

export default class MyHugeFormHelper {
    static onChangeHandler(e) {
        // do stuff here
    }

    static onInputHandler(e) {}

    static onSubmit(e, callback) {
        // you could pass a callback function from the logic of your component
    }
}

然后在您的组件中调用此类方法，如下所示：

import MyHugeFormHelper from './MyHugeFormHelper';

 const DateInput = (props) => {
     <DatePicker onChange={MyHugeFormHelper.onChangeHandler} />
 }
于 2018-09-11T00:50:34.383 回答