如何阻止React组件随输入框内容变化重复渲染？

你当前的组件每次输入字符都会重渲染，核心原因是name是组件的状态（state）——React规定，只要组件的state或props发生变化，就会触发组件重渲染。每次输入时调用setName更新name的state，自然会导致组件反复渲染，控制台也就会每次都打印items。

要实现仅在点击按钮后才重渲染组件，最直接的方案是用useRef替代useState存储输入框的临时值：

具体实现代码 #

import { useState, useRef } from 'react';

const Def = () => {
    const [items, addItems] = useState([]);
    // 使用useRef创建引用存储输入框值
    const nameRef = useRef('');
    
    const addName = () => {
        // 从ref的current属性获取输入值，更新items状态
        addItems([...items, nameRef.current]);
    }
    
    return(
        <div>
            <input 
                type='text'
                // 通过ref关联输入框，自动同步值到nameRef.current
                ref={nameRef}
            />
            {/* 如果不需要实时显示输入内容，直接删掉这个h2即可 */}
            {/* <h2>{nameRef.current}</h2> */}
            <button onClick={addName}>Add</button>
            {console.log(items)}
        </div>
    )
};

原理说明 #

• useRef创建的引用对象，其current属性的变化不会触发组件重渲染，刚好适合存储这种临时的输入内容；
• 只有当点击按钮调用addItems更新items这个state时，组件才会触发重渲染，此时控制台才会打印items。

补充说明 #

如果你的需求必须要实时显示输入框的内容（比如保留<h2>{name}</h2>），那无法避免输入时的重渲染——因为实时显示依赖state的更新，而state更新触发渲染是React的核心机制，这种渲染的性能开销极小，日常开发中完全不需要担心。

内容的提问来源于stack exchange，提问作者not_saajith