html - 防止在受控 react 输入中重新渲染

Question

我是 React.js 的新手，最近我了解了 React 中的受控输入。

代码:

这是我制作的示例实现:

import React, { useState } from 'react';

const MyForm = () => {

    console.log('rendered');  // Line 5
    const [text1, setText1] = useState('');
    const [text2, setText2] = useState('');

    const onSubmit = (evt) => {
        evt.preventDefault();
        console.log(text1, text2);
    }

    return (<form onSubmit={onSubmit}>
        <input type="text" value={text1} onChange={ev => setText1(ev.target.value)} />
        <input type="text" value={text2} onChange={ev => setText2(ev.target.value)} />
        <input type="submit"/>
    </form>);
};

问题:

性能。

上述实现工作正常，但我注意到每次其中一个字段发生更改时，第 5 行的 console.log('rendered'); 会再次被调用，整个表单似乎是重新渲染。我想这可能会导致一些问题，特别是对于具有许多输入字段和繁重预处理等的更高级表单。理想情况下，只有已更改的字段才应该重新呈现。

所以我想知道我对受控输入和表单的理解是否正确。如果不是，什么是更具可扩展性的实现方式？

Answer 1

由于状态发生变化，组件将重新渲染。这个是正常的。如果您不希望这样，您需要将输入字段“导出”到具有自己状态的新组件，但随后您必须以某种方式 ref 这些组件返回到您的父 form 组件，以便在您提交表单时获取其当前值。

检查this link关于如何使用 ref ，但我认为表单应该太重，以便您考虑为每个输入创建自己的状态以避免父组件重新渲染在每次输入更改时，甚至更改为不受控制的组件时，通常不建议这样做。