有条件地重新渲染反应组件

Question

让我们看看我们有一个Form组件：

//...
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);

输入将其值分派到redux存储的位置。 我想要获得的不是不必要地重新渲染Form组件，但它应该知道Submit的输入值。 上面带有getState示例可能是一个很好的解决方案，但是首先，我不知道实现它的任何可行解决方案。

其次，它将获得整个redux状态（这对性能不利）。 我想到的是使用state.forms[formId].submit = true按钮调度一个事件（例如，它设置state.forms[formId].submit = true ，并监听它，并通过mapStateToProps通过Form输入值，但是设置一个React.memo ，然后传递shouldComponentUpdate = (prev, next) => prev.submit !== next.submit作为第二个参数。

这样， Form将只更新，如果它得到了“绿灯”，如果submit是真实的，它只是调用onSubmit从输入值mapStateToProps 。 我想到的第三个解决方案是将按钮作为组件，并听取表单中的所有更改。 重新渲染按钮并不像每次重新渲染整个表单那样昂贵。 在这种情况下，最有效的解决方案是什么？

Answer 1

除非您正在使用Redux表单或需要在应用程序的其他位置访问该数据，否则您不应该在Redux中存储表单状态。 组件状态是诸如表单状态之类的更好的解决方案。 如果您希望对字段的更新显示在屏幕上，则必须重新呈现表单的某些部分。 使用组件状态意味着您仅重新呈现表单，而不是整个应用程序。 这应该是性能上的明智选择。 设置好表单数据并进行验证后，请在提交时触发调度功能，并将所有内容重新绑定到redux中。