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>);
};

问题:
表现。
以上实现工作正常，但我注意到每次字段更改时， console.log('rendered');再次调用第 5 行，整个表单似乎被重新渲染。我想这可能会导致一些问题，尤其是对于具有许多输入字段和大量预处理等的更高级表单。理想情况下，应该重新呈现已更改的字段。
所以我想知道我对受控输入和表单的理解是否还可以。如果不是，什么是更具可扩展性的实现方式？

Answer 1

由于状态发生变化，组件将重新渲染。这是正常的。如果您不希望那样，您需要将您的输入字段“导出”到具有自己状态的新组件，但是您必须以某种方式ref这些组件返回给您的父级 form组件以便在您提交表单时获取它们的当前值。
查询 this link关于如何使用 ref ，但我认为表单应该太重，以便您考虑为每个输入创建自己的状态以避免父组件在每次输入更改时重新渲染，甚至更改为不受控制的组件，这通常不推荐。