React17+MUI5：非受控TextField动态设默认值解决表单卡顿

你在React 17 + MUI 5环境下遇到的核心矛盾：

• 长表单用受控TextField时，快速输入因onChange频繁触发setState导致全量重渲染，产生卡顿；
• 改成非受控组件+防抖handleChange解决了卡顿，但编辑场景下，接口返回的初始值无法通过defaultValue更新（defaultValue仅首次渲染生效）；
• 当前用条件渲染规避，但不想用这种方式，且排斥单独用ref管理多输入框。

方案1：优化受控组件的重渲染（推荐回到受控模式） #

你给出的测试代码中，100个输入框卡顿的核心原因是：每次输入都会更新整个inputState对象，导致所有TextField都触发重渲染。通过以下两种方式优化，既能保留受控组件的数据流优势，又能解决卡顿：

子组件封装+React.memo缓存 #

把单个TextField封装成独立组件，用React.memo缓存，只有当自身的value或onChange变化时才重渲染：

// 封装独立的表单输入组件
const FormField = React.memo(({ label, name, value, onChange }) => {
  return (
    <MaterialUI.TextField
      label={label}
      name={name}
      value={value || ""}
      onChange={onChange}
    />
  );
});

// 父组件
const App = () => {
  const [inputState, setInputState] = React.useState({});
  const inputFieldKeys = Array.from({ length: 100 }).map((_, i) => `field_${i}`);

  // 用useCallback缓存handleChange，避免子组件频繁接收新函数导致重渲染
  const handleChange = React.useCallback((e) => {
    setInputState(oldState => ({ ...oldState, [e.target.name]: e.target.value }));
  }, []);

  return (
    <div>
      {inputFieldKeys.map(key => (
        <FormField
          key={key}
          label={key}
          name={key}
          value={inputState[key]}
          onChange={handleChange}
        />
      ))}
    </div>
  );
};

优化后，只有当前输入的FormField会重渲染，其余输入框不受影响，彻底解决卡顿。编辑场景下，直接通过setInputState初始化接口返回的值即可，无需处理defaultValue的问题。

useReducer管理状态 #

如果不想封装子组件，用useReducer管理表单状态，配合useCallback缓存事件处理函数，同样能减少不必要的重渲染：

const inputFieldKeys = Array.from({ length: 100 }).map((_, i) => `field_${i}`);

// 定义表单状态 reducer
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.name]: action.value };
    case 'INIT_FORM':
      return { ...state, ...action.values };
    default:
      return state;
  }
};

const App = () => {
  const [inputState, dispatch] = React.useReducer(formReducer, {});

  // 模拟接口获取初始值
  React.useEffect(() => {
    setTimeout(() => {
      const initialValues = inputFieldKeys.reduce((acc, key) => {
        acc[key] = `init_${key}`;
        return acc;
      }, {});
      dispatch({ type: 'INIT_FORM', values: initialValues });
    }, 1000);
  }, []);

  const handleChange = React.useCallback((e) => {
    dispatch({ type: 'UPDATE_FIELD', name: e.target.name, value: e.target.value });
  }, []);

  return (
    <div>
      {inputFieldKeys.map(key => (
        <MaterialUI.TextField
          key={key}
          name={key}
          label={key}
          value={inputState[key] || ""}
          onChange={handleChange}
        />
      ))}
    </div>
  );
};

useReducer的状态更新逻辑更清晰，且能避免因状态对象引用变化导致的全量重渲染，编辑时直接通过INIT_FORM action初始化所有字段值即可。

方案2：保持非受控组件，通过key重置初始化值 #

如果坚持用非受控组件，可通过修改key强制组件重新初始化，从而更新defaultValue，无需条件渲染：

类组件示例 #

class YourForm extends React.Component {
  state = {
    my_var: '',
    fieldKeys: { my_var: 0 } // 为每个输入框维护一个key标记
  };

  componentDidMount() {
    // 模拟接口请求获取初始值
    fetch('/api/edit-data')
      .then(res => res.json())
      .then(data => {
        this.setState({
          my_var: data.my_var,
          // 更新对应输入框的key，强制组件重新渲染
          fieldKeys: { ...this.state.fieldKeys, my_var: this.state.fieldKeys.my_var + 1 }
        });
      });
  }

  // 防抖处理的change事件
  handleChange = _.debounce((e) => {
    // 这里处理输入后的业务逻辑，比如提交到后端或更新状态
    console.log(`${e.target.name}: ${e.target.value}`);
  }, 300);

  render() {
    return (
      <TextField
        label="Label"
        name="my_var"
        onChange={this.handleChange}
        defaultValue={this.state.my_var}
        // 通过key变化触发组件重新初始化
        key={`field-my_var-${this.state.fieldKeys.my_var}`}
      />
    );
  }
}

函数组件示例 #

const YourForm = () => {
  const [my_var, setMyVar] = React.useState('');
  const [fieldKey, setFieldKey] = React.useState(0);

  React.useEffect(() => {
    fetch('/api/edit-data')
      .then(res => res.json())
      .then(data => {
        setMyVar(data.my_var);
        setFieldKey(prev => prev + 1); // 更新key触发组件重置
      });
  }, []);

  const handleChange = React.useCallback(_.debounce((e) => {
    // 防抖后的业务逻辑
  }, 300), []);

  return (
    <TextField
      label="Label"
      name="my_var"
      onChange={handleChange}
      defaultValue={my_var}
      key={`field-my_var-${fieldKey}`}
    />
  );
};

当接口返回值后，更新输入框的key，React会销毁旧组件并创建新组件，此时defaultValue会使用最新的状态值，完美解决非受控组件初始化值不更新的问题。

方案3：使用MUI的UncontrolledTextField #

MUI提供了UncontrolledTextField，本质是封装好的非受控输入框，用法和方案2一致，通过key重置初始化值，代码更清晰：

<UncontrolledTextField
  label="Label"
  name="my_var"
  onChange={this.handleChange}
  defaultValue={this.state.my_var}
  key={`field-my_var-${this.state.fieldKeys.my_var}`}
/>

• 优先推荐方案1的受控组件优化，符合React数据流设计，后续维护更简单，同时解决卡顿和编辑初始化问题；
• 如果坚持用非受控组件，方案2的key重置法是最简洁的替代方案，无需条件渲染和单独ref。

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