React+Material UI 5输入框输字符失焦，如何处理组件重渲染？

问题根源 #

输入框每输一个字符就失焦，本质是组件每次重渲染时被重新创建，DOM节点被销毁后重建，焦点自然丢失。最常见的情况是你把带输入框的表格单元格这类自定义组件，定义在了父组件的渲染函数/函数体内部，导致每次父组件更新都要重新生成这个组件。

具体修复方法 #

• 把内部组件抽成独立顶层组件
  别把带输入框的单元格组件放在父组件里定义，抽出来单独写在父组件外面，这样组件只会被创建一次，不会随父组件重渲染而重建。
  错误写法：

  function MyTable() {
    // 每次渲染都重新生成这个组件
    const EditableInputCell = ({ value, onChange }) => (
      <TextField value={value} onChange={onChange} />
    );
  
    return <TableBody><TableCell><EditableInputCell /></TableCell></TableBody>;
  }
  

  正确写法：

  // 抽出来单独定义，只创建一次
  const EditableInputCell = ({ value, onChange }) => (
    <TextField value={value} onChange={onChange} />
  );
  
  function MyTable() {
    return <TableBody><TableCell><EditableInputCell /></TableCell></TableBody>;
  }
  

• 用useCallback稳定回调函数
  输入框的onChange回调，要用useCallback包裹，确保每次渲染时回调引用不变，避免触发子组件不必要的重渲染。
  示例：

  const handleInputChange = useCallback((rowId, newValue) => {
    setTableData(prevData => 
      prevData.map(row => row.id === rowId ? {...row, value: newValue} : row)
    );
  }, []); // 依赖项留空即可，React的状态更新函数本身是稳定的
  

• 给表格行/单元格加稳定的key
  遍历生成表格行时，key要用数据本身的唯一标识（比如每条数据的id），别用索引。用索引的话，数据变化时React会误判为新元素，导致组件重建。
  错误写法：

  tableData.map((row, idx) => <TableRow key={idx}>...</TableRow>)
  

  正确写法：

  tableData.map(row => <TableRow key={row.id}>...</TableRow>)
  

• 用useMemo缓存处理后的表格数据
  如果你的表格数据需要处理后再渲染，用useMemo缓存处理结果，避免每次渲染都生成新的数组引用，触发不必要的重渲染。
  示例：

  const processedTableData = useMemo(() => {
    return tableData.map(row => ({...row, formattedValue: formatValue(row.value)}));
  }, [tableData]); // 只有tableData变化时才重新处理
  

针对你代码的调整建议 #

你的代码里核心问题就是带输入框的单元格组件定义在了父组件内部，每次父组件因输入更新状态时，这个组件都会被重新创建，导致输入框DOM重建失焦。把这个组件抽出来放到父组件外面，就能解决问题。

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