优化 React 应用性能：避免重复 Setter 调用导致的过度渲染

import React, { useState } from 'react';

const MyTextComponent = React.memo(({ onPress, children }) => {
  console.log('MyTextComponent render'); // 用于观察渲染情况
  return <div onClick={onPress}>{children}</div>;
});

const MainComponent = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleTextPress = () => {
    setModalVisible(true);
  };

  return (
    <div>
      <div onClick={() => setModalVisible(true)}>Click me</div>
      <MyTextComponent onPress={handleTextPress}>Text 1</MyTextComponent>
      <MyTextComponent onPress={handleTextPress}>Text 2</MyTextComponent>
      <MyTextComponent onPress={handleTextPress}>Text 3</MyTextComponent>
      {modalVisible ? <div>The Modal is visible now</div> : null}
    </div>
  );
};

export default MainComponent;

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

const ListItem = React.memo(({ item, onWordPress }) => {
  console.log(`ListItem render for item: ${item}`);
  return (
    <TouchableOpacity onPress={() => onWordPress(item)}>
      <Text>{item}</Text>
    </TouchableOpacity>
  );
});

const ArticleList = () => {
  const [selectedWord, setSelectedWord] = useState(null);
  const articles = ["Word 1", "Word 2", "Word 3", "Word 4", "Word 5"];

  const handleWordPress = (word) => {
    setSelectedWord(word);
  };

  const renderItem = ({ item }) => (
    <ListItem item={item} onWordPress={handleWordPress} />
  );

  return (
    <View>
      <FlatList
        data={articles}
        renderItem={renderItem}
        keyExtractor={(item) => item}
      />
      {selectedWord && (
        <Text>Selected word: {selectedWord}</Text>
      )}
    </View>
  );
};

export default ArticleList;