Question

我有一个非常强烈的形式。大约20个输入，其中包括多个日期选择器，谷歌位置api，规则值等。由于这些输入中很少有可以直接进行更新而无需进行某种转换。我已经成功地将组件从有状态的组件转换为在生命周期方法中做得太多的有状态组件（现在使用formik来管理值），但是我正在尝试确定定义必要的辅助函数的最佳方法（例如就性能和样式而言，为updateDateWithTime，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行功能组件的复杂性而言，将这些片段分成子组件感觉就像是正确的模式，但是如果子组件最终只是在其渲染器中内联定义了相同的功能，实际上是不是一样？

Answer 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} />
 }

反应组件功能比较

1 个答案: