Javascript 有条件再引发反应组件

让我们看看我们有一个

表单

组件：

//...
const formsReducer = (forms = {}, action) => {
  switch (action.type) {
    case "CREATE_FORM" : {
      const { id, inputIds } = action;

      return {
        ...forms,
        [id]: inputIds.reduce((inputs, inputId) => {

          inputs[inputId] = "";

          return inputs;
        }, {})
      };
    };
    default : return forms
  };
};
//...
import React, { useEffect } from "react";
import { connect } from "react-redux";

const createForm = (id, inputIds) => ({
  type: "CREATE_FORM",
  id,
  inputIds
})

const Form = ({
    id,
    inputs,
    onSubmit,

    createForm,

    getState //!!
}) => {

  useEffect(() => {
      createForm(id, inputs.map(({ inputId }) => inputId))
  }, []);

  submit = () => {
    const inputValues = getState().forms[id];

    onSubmit(inputValues);
  };

  return (
    <div className="form">
      {inputs.map(props => <Input {...props} />)
      <button onClick={submit}>Submit</button>
    </div>
  )

};

const mapDispatchToProps = { createForm };

export default connect(null, mapDispatchToProps)(Form);

/。。。
const formsReducer=（forms={}，action）=>{
开关（动作类型）{
案例“创建表单”：{
常量{id，inputIds}=动作；
返回{
…表格，
[id]：inputIds.reduce（（输入，inputId）=>{
输入[inputId]=“”；
返回输入；
}, {})
};
};
默认值：返回表单
};
};
//...
从“React”导入React，{useffect}；
从“react redux”导入{connect}；
const createForm=（id，inputIds）=>({
键入：“创建表单”，
身份证件
输入
})
常数形式=({
身份证件
投入，
提交时，
createForm，
getState/！！
}) => {
useffect（（）=>{
createForm（id，inputs.map（（{inputId}）=>inputId））
}, []);
提交=（）=>{
const inputValues=getState（）.forms[id]；
onSubmit（输入值）；
};
返回(
{inputs.map（props=>）
提交
)
};
常量mapDispatchToProps={createForm}；
导出默认连接（空，mapDispatchToProps）（表单）；

输入将其值分派到redux存储中。我想要获得的是不要不必要地重新呈现

表单

组件，但它应该在提交时知道输入值。上面带有

getState

的示例可能是一个很好的解决方案，但首先，我不知道实现它的任何可能的解决方案

其次，它将获得整个redux状态（这对性能不好），我考虑的是使用submit按钮发送事件（例如，它设置

state.forms[formId].submit=true

，并聆听它，通过

mapStateToProps

以

形式输入值，但在其上设置
React.memo
，并将
shouldComponentUpdate=（prev，next）=>prev.submit！==next.submit作为第二个参数传递

这样
表单
只要得到“绿灯”就会更新，如果
submit
为真，它只需调用
onSubmit
，使用
MapStateTrops
中的输入值。我想到的第三个解决方案是将按钮作为一个组件，并倾听表单中的每一个更改。每次重新提交按钮的成本并不比重新提交整个表单的成本高。最昂贵的解决方案是什么此方案的有效解决方案？
除非您正在使用redux表单或需要在应用程序中的其他位置访问该数据，否则不应在redux中存储表单状态。对于类似表单状态的内容，组件状态是一个更好的解决方案。如果您希望在scre中显示对字段的更新，则必须重新提交表单的部分内容恩。使用组件状态意味着你只重新呈现表单，而不是整个应用程序。这在性能上应该是很好的。一旦你设置了表单数据并进行了验证，然后在提交时启动一个调度函数，并将所有内容重新绑定到redux中。
仅仅因为你在使用redux并不意味着你必须在任何地方都使用它。保持组件规格本地状态中的fic状态意味着不必要的操作和缩减器样板文件带来的混乱更少，而且由于间接性更少，因此更容易对组件状态进行推理。我喜欢redux，但只在有帮助的地方使用它。如果表单需要以“昂贵”的方式处理作为
输入的数据，该怎么办方法？上面的代码片段只是一个演示，但此表单的目的是使其尽可能灵活，只向其传递一些属性，但这意味着
表单
需要计算并构造输入的工作。在这个问题之前，我创建了带有react state的表单，但它需要计算
Input的属性
每次发生输入更改时，它都会变得有点慢。我曾考虑在坐骑上计算输入道具，并将其存储在react状态，以避免每次更改时都计算输入道具，但正如我读到的，这似乎不是解决此问题的明智方法。如果您的问题与我就是你问的那个人，请用相关代码更新你的问题，因为我只能参考你发布的内容。