React Native中PhoneInput输入时子组件重复渲染问题求助

问题场景 #

基于React Native Boilerplate的useTheme与react-hook-form的useController实现了PhoneInput组件及ButtonFlag子组件，已为两个组件包裹memo，相关回调也用useCallback处理，但修改TextInput的值时，ButtonFlag和下拉列表仍会重复渲染。

原因分析 #

1. ButtonFlag重复渲染的核心原因 #

传给ButtonFlag的item属性是每次PhoneInput渲染时新建的对象（{ countryNumber: value.phoneCode, ISOcode: value.isoCode }），即使value没有变化，这个对象的引用也会更新。React.memo是浅比较props，会认为props发生变化，从而触发ButtonFlag重渲染。

此外，fieldState.invalid（来自react-hook-form的useController）可能会随输入内容变化而频繁更新，也会导致ButtonFlag重复渲染。

2. 下拉列表renderDropdown重复执行的原因 #

renderDropDown是一个回调函数，每次PhoneInput重渲染时都会被调用（即使下拉列表未展开），其中的console.log('render list')会每次执行。同时，FlatList的renderItem中包含匿名函数，每次渲染都会创建新的函数引用，导致列表项不必要重渲染。

解决方案 #

方案1：稳定ButtonFlag的props引用 #

用useMemo缓存传给ButtonFlag的item对象，确保只有当value变化时才更新引用：

// 在PhoneInput组件中添加
const flagItem = useMemo(() => ({
  countryNumber: value.phoneCode,
  ISOcode: value.isoCode,
}), [value]);

// 传递给ButtonFlag时改为
<ButtonFlag
  isError={fieldState.invalid}
  isOpen={open}
  item={flagItem}
  onPress={toggleDropdown}
/>

如果希望减少fieldState.invalid的变化频率，可以修改react-hook-form的验证模式，比如将useController的mode设为'onBlur'或'onSubmit'，仅在输入框失焦或提交时触发验证：

const { field, fieldState } = useController({
  control,
  name,
  rules: { ...你的验证规则 },
  mode: 'onBlur' // 改为'onSubmit'或'onBlur'
});

方案2：优化下拉列表的渲染逻辑 #

方式A：将renderDropDown改为独立memo组件

把下拉列表抽成单独的组件，用memo包裹，避免每次PhoneInput渲染时都执行回调：

// 创建DropDown组件
type DropDownProps = {
  open: boolean;
  toggleDropdown: () => void;
  value: typeof countries[0]['value'];
  theme: ReturnType<typeof useTheme>;
};

const DropDown = memo(({ open, toggleDropdown, value, theme }: DropDownProps) => {
  const { layout, gutters, borders, backgrounds, fonts, colors } = theme;

  if (!open) return null;

  console.log('render list');

  const renderCountryItem = useCallback(({ item, index }: { item: typeof countries[0], index: number }) => {
    const handlePress = useCallback(() => {
      setValue(item.value);
      toggleDropdown();
    }, [item.value, toggleDropdown]);

    return (
      <Pressable
        onPress={handlePress}
        style={({ pressed }) => [
          {
            flexDirection: 'row',
            borderTopWidth: index !== 0 ? 1 : 0,
            transform: [{ scale: pressed ? 0.98 : 1 }],
            height: 46,
          },
          layout.itemsCenter,
          borders.grey,
        ]}
      >
        <CountryFlag isoCode={item.value.isoCode} size={22} />
        <Text style={[gutters.marginLeft_10, fonts.black300, fonts.size_16, fonts.weight400]}>
          {item.label}
        </Text>
        {value === item.value && (
          <Icon
            style={{ position: 'absolute', right: 0 }}
            color={colors.pink600}
            name="checked"
            size={20}
          />
        )}
      </Pressable>
    );
  }, [toggleDropdown, value, layout, gutters, borders, fonts, colors]);

  return (
    <View
      style={[
        { zIndex: 1, position: 'absolute', top: 6 + 46 + 1, width: '100%', borderWidth: 1 },
        backgrounds.white,
        borders.rounded_6,
        borders.grey,
        gutters.paddingHorizontal_15,
      ]}
    >
      <FlatList data={countries} renderItem={renderCountryItem} />
    </View>
  );
});

// 在PhoneInput中使用
return (
  // ...其他代码
  <DropDown
    open={open}
    toggleDropdown={toggleDropdown}
    value={value}
    theme={useTheme()}
  />
);

方式B：优化现有renderDropDown回调

将console.log('render list')移到if(open)内部，避免不必要的日志输出；同时用useCallback缓存FlatList的renderItem函数：

const renderCountryItem = useCallback(({ item, index }: { item: typeof countries[0], index: number }) => {
  const handlePress = useCallback(() => {
    setValue(item.value);
    toggleDropdown();
  }, [item.value, toggleDropdown]);

  return (
    <Pressable onPress={handlePress} style={({ pressed }) => [
      {
        flexDirection: 'row',
        borderTopWidth: index !== 0 ? 1 : 0,
        transform: [{ scale: pressed ? 0.98 : 1 }],
        height: 46,
      },
      layout.itemsCenter,
      borders.grey,
    ]}>
      <CountryFlag isoCode={item.value.isoCode} size={22} />
      <Text style={[gutters.marginLeft_10, fonts.black300, fonts.size_16, fonts.weight400]}>
        {item.label}
      </Text>
      {value === item.value && (
        <Icon
          style={{ position: 'absolute', right: 0 }}
          color={colors.pink600}
          name="checked"
          size={20}
        />
      )}
    </Pressable>
  );
}, [toggleDropdown, value, layout, gutters, borders, fonts, colors]);

const renderDropDown = useCallback(() => {
  if (open) {
    console.log('render list');
    return (
      <View
        style={[
          { zIndex: 1, position: 'absolute', top: 6 + 46 + 1, width: '100%', borderWidth: 1 },
          backgrounds.white,
          borders.rounded_6,
          borders.grey,
          gutters.paddingHorizontal_15,
        ]}
      >
        <FlatList data={countries} renderItem={renderCountryItem} />
      </View>
    );
  }
  return null;
}, [open, renderCountryItem, layout, gutters, borders, backgrounds]);

方案3：稳定Theme属性引用 #

如果useTheme每次返回的是新对象（比如未做缓存的Context），可以用useMemo缓存Theme的解构属性，避免因Theme引用变化导致子组件重渲染：

const theme = useTheme();
const { layout, gutters, borders, backgrounds, fonts, colors } = useMemo(() => theme, [theme]);

关键知识点总结 #

• React.memo：对组件props做浅比较，仅当props引用变化时触发重渲染。必须保证传递给memo组件的props引用稳定，否则优化无效。
• useCallback：缓存函数引用，仅当依赖项变化时生成新函数。用于稳定传递给子组件的回调props。
• useMemo：缓存计算结果（对象、数组、复杂值），避免每次渲染创建新引用。用于稳定传递给子组件的对象/数组props。
• 父组件重渲染影响：父组件重渲染时，所有子组件默认会跟着重渲染，除非子组件用memo且props未变化，或通过useCallback/useMemo稳定props。

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