React textarea组件输入百万字符后卡顿，子传父场景求解决方案

核心卡顿原因 #

• 受控模式下，每输入一个字符就触发state更新，React会对百万级字符串做VDOM diff和DOM更新，开销极大；
• 子组件每次输入都触发父组件回调，会连带触发父组件重渲染，进一步加剧性能损耗。

针对性优化方案 #

1. 防抖处理子传父回调

子组件本地维护输入状态，只在输入停顿后才把值同步给父组件，大幅减少父组件的重渲染次数：

// 子组件
import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

const TextareaChild = ({ onTextChange }) => {
  const [localValue, setLocalValue] = useState('');

  const debouncedSync = useCallback(
    debounce((value) => {
      onTextChange(value);
    }, 300), // 可根据需求调整间隔，200-500ms为宜
    [onTextChange]
  );

  const handleInput = (e) => {
    const value = e.target.value;
    setLocalValue(value);
    debouncedSync(value);
  };

  return <textarea value={localValue} onChange={handleInput} />;
};

2. 改用非受控组件模式

通过ref直接操作原生textarea DOM，避免React频繁管控超大字符串的state更新，仅在需要时同步给父组件：

// 子组件
import { useRef, useCallback } from 'react';
import debounce from 'lodash.debounce';

const TextareaChild = ({ onTextChange }) => {
  const textareaRef = useRef(null);

  const debouncedSync = useCallback(
    debounce(() => {
      if (textareaRef.current) {
        onTextChange(textareaRef.current.value);
      }
    }, 300),
    [onTextChange]
  );

  return <textarea ref={textareaRef} onChange={debouncedSync} />;
};

3. 避免不必要的重渲染

• 用React.memo包裹子组件，减少因父组件无关状态变更导致的子组件重渲染；
• 父组件用useCallback缓存回调函数，防止回调引用变化触发子组件重渲染：

// 父组件
import { useState, useCallback } from 'react';
import TextareaChild from './TextareaChild';

const Parent = () => {
  const [text, setText] = useState('');

  const handleTextChange = useCallback((value) => {
    setText(value);
  }, []);

  return <TextareaChild onTextChange={handleTextChange} />;
};

// 子组件
import { memo } from 'react';
const TextareaChild = memo(({ onTextChange }) => {
  // ... 子组件逻辑
});

4. 极端场景：分片处理文本

如果必须实时同步百万级文本，可将字符串拆分为多个分片存储，仅渲染当前可视区域内容（类似虚拟滚动思路），但实现复杂度较高，一般前三种方案足以覆盖大部分场景。

额外注意事项 #

• 不要在输入回调中做复杂字符串处理（如正则匹配、格式化），若必须处理，放在防抖回调或用Web Worker异步执行，避免阻塞主线程；
• 测试不同防抖间隔，平衡输入响应速度和性能。

内容的提问来源于stack exchange，提问作者M Ahmed Mushtaq