javascript - React - 当输入更改时如何防止重新渲染所有输入字段

Question

我正在实现一个使用 Json 生成的表单。 Json 是从 API 检索的，然后循环遍历我渲染输入元素的项目。这是示例 Json:

{
  name: {
      elementType: 'input',
      label: 'Name',
      elementConfig: {
        type: 'text',
        placeholder: 'Enter name'
      },
      value: '',
      validation: {
        required: true
      },
      valid: false,
      touched: false
    }
   }

这是我呈现表单的方式:

    render() {
        const formElementsArray = [];
        for (const key in this.props.deviceConfig.sensorForm) {
         formElementsArray.push({
            id: key,
            config: this.props.deviceConfig.sensorForm[key]
         });

    const itemPerRow = 4;
      const rows = [
        ...Array(Math.ceil(props.formElementsArray.length / itemPerRow))
      ];
      const formElementRows = rows.map((row, idx) =>
        props.formElementsArray.slice(
          idx * itemPerRow,
          idx * itemPerRow + itemPerRow
        )
      );
      const content = formElementRows.map((row, idx) => (
        <div className='row' key={idx}>
          {row.map((formElement) => (
            <div className='col-md-3' key={formElement.id}>
              <Input
                key={formElement.id}
                elementType={formElement.config.elementType}
                elementConfig={formElement.config.elementConfig}
                value={formElement.config.value}
                invalid={!formElement.config.valid}
                shouldValidate={formElement.config.validation}
                touched={formElement.config.touched}
                label={formElement.config.label}
                handleChange={(event) => props.changed(event, formElement.id)}
              />
            </div>
          ))}
        </div>
 ...
    }

我将表单状态存储在 redux 中，并且在每次输入更改时，我都会更新状态。现在的问题是每次我更新状态时，整个表单都会再次重新渲染...是否有任何方法可以优化它，以便仅重新渲染更新的表单元素？

编辑:

1. 我在 Input.js 中使用了 React.memo 作为: 导出默认React.memo(input);

2. 我的有状态组件是纯组件。

3. Parent 是类组件。

编辑2:

这是我创建formElementArray的方法:

const formElementsArray = [];
for (const key in this.props.deviceConfig.sensorForm) {
    formElementsArray.push({
    id: key,
    config: this.props.deviceConfig.sensorForm[key]
});

Answer 1

您可以将内容作为一个单独的组件，如下所示。 并删除formElementsArray来自父组件的 prop。

export default function Content() {
  const formElementRows = useForElementRows();
      formElementRows.map((row, idx) => (
            <Input
              formId={formElement.id}
              handleChange={props.changed}
            />
      )
}

Input.js 内部

const handleInputChange = useCallback((event) => {
   handleChange(event, formId);
}, [formId, handleChange]);
<input handleChange={handleInputChange} />
export default React.memo(Input)

这样你就可以记住handleChange有效地。它将使我们能够防止其他<Input />的不必要的渲染。 通过执行此 forElementRows 更改不会导致其他组件的任何重新渲染。