有條件地重新渲染反應組件

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中。