如何解决输入拆分View频繁重渲染引发的React应用性能问题？

核心优化方案 #

1. 稳定事件回调，修复回调泄漏 #

Excessive number of pending callbacks错误主要源于每次渲染都生成新的点击回调函数，导致Native层积累大量未清理的回调。用useCallback缓存点击逻辑，保证函数引用稳定：

import { useCallback, useRef } from 'react';

// 定义TextInput的ref用于控制光标
const textInputRef = useRef(null);

// 缓存点击处理函数
const handleCharTap = useCallback((index) => {
  // 定位光标到点击的字符位置
  textInputRef.current?.setNativeProps({
    selection: { start: index, end: index }
  });
  // 让输入框获得焦点
  textInputRef.current?.focus();
}, []);

2. 拆分独立子组件，精准控制重渲染 #

把单个字符的View封装成独立组件，结合memo做浅比较，只有当字符内容或点击回调变化时才重渲染该组件，避免全量更新：

import { memo } from 'react';
import { View, Text } from 'react-native';

// 单个字符的组件，memo会对比props是否变化
const CharBox = memo(({ char, index, onTap }) => {
  return (
    <View style={{ borderWidth: 1, padding: 4, margin: 2 }} onPress={() => onTap(index)}>
      <Text>{char}</Text>
    </View>
  );
});

// 父组件中渲染字符列表
const charList = useMemo(() => inputValue.split(''), [inputValue]);

return (
  <>
    <TextInput ref={textInputRef} value={inputValue} onChangeText={setInputValue} />
    <View style={{ flexDirection: 'row' }}>
      {charList.map((char, idx) => (
        <CharBox key={idx} char={char} index={idx} onTap={handleCharTap} />
      ))}
    </View>
  </>
);

注：这里用index作为key是因为输入场景下字符序列的位置与index强绑定，若有复杂编辑（如中间删除），可考虑给每个字符生成唯一标识，但一般输入场景下index足够用。

3. 缓存拆分后的字符数组，避免重复计算 #

用useMemo缓存split后的数组，只有当输入内容变化时才重新拆分，减少不必要的计算开销：

const charList = useMemo(() => {
  return inputValue.split('');
}, [inputValue]); // 仅当inputValue改变时重新执行split

4. 排查父组件不必要的重渲染 #

检查父组件是否有其他无关状态（如非核心UI状态）导致频繁重渲染，把无关状态拆分到子组件，或用useMemo缓存传递给子组件的props，确保父组件只在必要时更新。

进阶优化（针对大量字符场景） #

如果需要处理超大量字符（如数百个），可以使用虚拟列表组件（如React Native内置的FlatList），只渲染当前可视区域内的字符Box，大幅降低渲染压力：

<FlatList
  data={charList}
  renderItem={({ item, index }) => (
    <CharBox char={item} index={index} onTap={handleCharTap} />
  )}
  keyExtractor={(item, index) => index.toString()}
  horizontal
  showsHorizontalScrollIndicator={false}
/>

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