如何阻止React Native组件重复渲染？解决国际化钩子重复执行问题

为什么用React.memo包裹钩子会报错 #

React.memo是高阶组件，仅能用来包裹React组件（函数/类组件），返回优化后的组件。而自定义钩子是普通函数，并非组件，用memo包裹钩子自然会抛出“Object is not a function”的错误——这属于API场景误用。

正确的优化方案 #

要让useLocalization仅在语言状态变化时更新，需从两个层面优化：

1. 精准订阅Redux状态，避免钩子不必要触发

确保useSelector只订阅language字段，而非整个Redux state。如果之前钩子订阅了整个state，任何state变化（比如TextInput输入触发的表单state更新）都会导致钩子重新执行。

优化后的钩子示例：

import { useSelector } from 'react-redux';
import { useMemo } from 'react';
import zhStrings from './zh';
import enStrings from './en';

const useLocalization = () => {
  // 仅订阅language字段，只有该值变化时才重新执行
  const selectedLang = useSelector(state => state.language);

  // 用useMemo缓存语言文件引用，避免每次钩子执行都返回新对象
  const strings = useMemo(() => {
    return selectedLang === 'zh' ? zhStrings : enStrings;
  }, [selectedLang]); // 依赖项仅为selectedLang

  return strings;
};

2. 用React.memo优化依赖语言文件的昂贵组件

如果昂贵组件接收useLocalization返回的字符串对象作为props，用React.memo包裹该组件，确保只有当props（即字符串对象引用）变化时才重渲染：

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

const ExpensiveComponent = React.memo(({ strings }) => {
  // 此处是昂贵渲染逻辑，比如复杂列表、图表等
  return (
    <View>
      <Text>{strings.title}</Text>
    </View>
  );
});

// 组件使用示例
const MainScreen = () => {
  const strings = useLocalization();
  const [inputText, setInputText] = useState('');

  return (
    <View>
      <TextInput
        value={inputText}
        onChangeText={setInputText}
      />
      <ExpensiveComponent strings={strings} />
    </View>
  );
};

关键原理 #

• useSelector精准订阅：仅监听language字段变化，避免无关state更新触发钩子执行。
• useMemo缓存语言文件：同一语言下，钩子返回的字符串对象引用始终一致，不会因组件重渲染（比如TextInput输入）生成新对象。
• React.memo优化组件：对比props引用，仅当语言切换导致字符串对象变化时，才触发昂贵组件重渲染。

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