React 组件功能对比

Question

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

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

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

  return() {...}
}

选项 2： 在文件中定义为 "globals"，在函数之外：

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

我的建议是使用一些静态方法创建一个助手 class，您可以在其中将输入 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
    }
}

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

import MyHugeFormHelper from './MyHugeFormHelper';

 const DateInput = (props) => {
     <DatePicker onChange={MyHugeFormHelper.onChangeHandler} />
 }

React 组件功能对比

React Component Function Comparison

reactjs

formik