未能阻止React.memo重新呈现

Question

我正在构建一个react本机应用程序，它有一个包含大量textInput和按钮的表单页面。每个字段都不会导致性能问题。

但是，当它们放在一起时，应用程序将在Perf中显示js线程框架下降。因此，我认为当任何状态发生变化时，页面都会重新呈现所有的组件。

我尝试了两种方法。

1. Moving components out of the main export function.
2. Using React.memo.

不幸的是，这两种方法都不起作用。该应用程序仍然滞后和重新渲染每一次对所有组件。

所以我为它创造了一个简单的例子。您可以看到下面的代码。

我只想重新呈现ChildItem，只对相应的状态进行修改。现在，控制台将记录从1到5的任何点击按钮。由于传递给备注组件的props没有更改，所以当按下按钮时，控制台只会记录特定索引的相应句子。

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

const ChildeItem = memo( ({index, value, onPress}) =>{
  console.log(`ChildeItem ${index} rendered`);
  return(
    <View style={{flexDirection: 'row'}}>
      <Text style={{flex: 1, textAlign: 'center'}}>
        {value}
      </Text>
      <View style={{flex: 1}}>
        <Button 
          onPress={onPress} 
          title={"+"}
        />
      </View>
    </View>
  )
});

export default function TestScreen({navigation}) {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [value3, setValue3] = useState(0);
  const [value4, setValue4] = useState(0);
  const [value5, setValue5] = useState(0);

  return(
    <View>
      <ChildeItem index={1} value={value1} onPress={()=>{setValue1(value1+1);}} />
      <ChildeItem index={2} value={value2} onPress={()=>{setValue2(value2+1);}} />
      <ChildeItem index={3} value={value3} onPress={()=>{setValue3(value3+1);}} />
      <ChildeItem index={4} value={value4} onPress={()=>{setValue4(value4+1);}} />
      <ChildeItem index={5} value={value5} onPress={()=>{setValue5(value5+1);}} />
    </View>
  )
}

还是我对React.memo有什么误解？任何帮助都将不胜感激。谢谢。

Answer 1

您的index和value道具可以用于回忆录，但是您的onPress道具会导致重新呈现，因为在TestScreen的每次渲染中，都会重新创建onPress道具函数，因此它会对引用进行更改。您可以通过使用useCallback钩子来防止这种情况。

export default function TestScreen({navigation}) {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [value3, setValue3] = useState(0);
  const [value4, setValue4] = useState(0);
  const [value5, setValue5] = useState(0);

  // Use useCallback for each function
  const onPress1 = useCallback(() => setValue1(value1+1), [value1]);
  const onPress2 = useCallback(() => setValue2(value2+1), [value2]);
  const onPress3 = useCallback(() => setValue3(value3+1), [value3]);
  const onPress4 = useCallback(() => setValue4(value4+1), [value4]);
  const onPress5 = useCallback(() => setValue5(value5+1), [value5]);

  return(
    <View>
      <ChildeItem index={1} value={value1} onPress={onPress1} />
      <ChildeItem index={2} value={value2} onPress={onPress2} />
      <ChildeItem index={3} value={value3} onPress={onPress3} />
      <ChildeItem index={4} value={value4} onPress={onPress4} />
      <ChildeItem index={5} value={value5} onPress={onPress5} />
    </View>
  )
}

通过使用useCallback钩子，您可以回溯onPress函数，因此只有在相关的值发生变化时才会重新创建它们。