React表单处理时useState触发频繁重渲染，是否有更优的实现方案？

首先明确：普通业务场景下，使用useState绑定的受控组件每次输入触发重渲染的性能开销极低，完全可以正常使用，只有当组件本身渲染逻辑复杂、重渲染会产生明显卡顿时，才需要做针对性优化，可选方案如下：

方案1：使用非受控组件+useRef #

适合不需要实时校验、输入联动等需求，仅需要在提交时获取表单值的场景，输入过程完全不会触发组件重渲染：

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 仅提交时读取输入框值
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">提交</button>
    </form>
  );
}

• 优点：实现最简单，输入过程无任何额外重渲染
• 缺点：不支持实时值绑定、实时校验、输入联动等受控组件能力

方案2：拆分子组件隔离重渲染范围 #

如果需要保留受控组件的能力，可以把表单输入拆分为独立的小组件，输入时只有子组件会重渲染，父组件不受影响：

import { useState } from 'react';

// 独立封装的输入子组件
function FormInput({ onSubmit }) {
  const [value, setValue] = useState("");
  
  const handleEnter = (e) => {
    if (e.key === "Enter") {
      onSubmit(value);
    }
  };

  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={handleEnter}
    />
  )
};

// 父组件
function ParentComponent() {
  const handleFormSubmit = (val) => {
    console.log("最终提交值：", val);
  };
  // 输入时仅FormInput重渲染，父组件不会触发重渲染
  return <FormInput onSubmit={handleFormSubmit} />
};

• 优点：完整保留受控组件的所有能力，重渲染仅局限在子组件内部，不会影响父组件或其他页面模块
• 缺点：需要额外拆分组件，适合表单逻辑相对独立的场景

方案3：使用专业表单库 #

如果是包含多字段校验、联动、动态增删表单项等逻辑的复杂表单，推荐直接使用成熟的表单库，这类库内部默认基于非受控模式实现，仅在必要时触发状态更新，重渲染次数远低于手动实现的useState绑定方案：

import { useForm } from 'react-hook-form';

function ComplexForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (formData) => console.log(formData);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="用户名" />
      <input {...register("email")} placeholder="邮箱" />
      <button type="submit">提交</button>
    </form>
  );
};

• 优点：内置多字段管理、校验、联动、错误提示等能力，开箱即用性能优异
• 缺点：需要引入第三方依赖

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