есть ли способ избежать или улучшить повторное отображение списка контактов при поиске контактов в react native - PullRequest
Новая
       125

есть ли способ избежать или улучшить повторное отображение списка контактов при поиске контактов в react native

0 голосов
/ 21 июня 2020

Я работаю над контактным приложением, поддерживающим реакцию, с функцией поиска в реальном времени. У меня проблема с перерисовкой списка контактов при каждом нажатии клавиши. Есть ли способ оптимизировать функцию поиска, где я могу избежать ненужных повторных отрисовок на Flatlist контактов. Заранее спасибо

вот мой контактный компонент: 

const Contacts = () => {
  const [contact, setContact] = useState({});
 
  useEffect(() => {...read contacts and then save it to contact and inMemoryContact state});

  const renderItem = ({ item }) => <RenderContacts item={item} />;

  const renderList = () => {
    return (
      <FlatList
        keyboardShouldPersistTaps="handled"
        data={contact}
        keyExtractor={(item, index) => index.toString()}
        renderItem={renderItem}
  />
    );
  };

  return (
    <View>
      <Text style={Styles.textStyle}>All Contacts</Text>
      {renderList()}
    </View>
  );
};

вот мой поисковый компонент: 

const SearchBar = ({ updateContactState }) => {
  const { inMemoryContact } = useSelector(state => state.contactReducer);

  const searchContacts = value => {
    const filteredContact = inMemoryContact.filter(contactToFilter => {
      const contactLowerCase = `${contactToFilter.firstName} ${contactToFilter.lastName}`.toLowerCase();
      const searchTerm = value.toLowerCase();
      return contactLowerCase.indexOf(searchTerm) > -1;
    });
    updateContactState(filteredContact);
  };

  return (
    <View style={Styles.SectionStyle}>
      <MaterialIcons style={Styles.iconStyle} name="search" size={28} />
      <TextInput
        placeholder="Search Contact"
        autoCapitalize="none"
        autoCorrect={false}
        onChangeText={content => {
          searchContacts(content);
        }}
      />
    </View>
  );
};

вот мой компонент renderContact, который продолжает рендеринг : 

const RenderContacts = ({ item }) => {
     return item.phoneNumbers.map(element => (
        <TouchableOpacity ...>
          ... list of contacts
        </TouchableOpacity>
      ));
     )
}

1 Ответ

0 голосов
/ 21 июня 2020

Заявление о вашей проблеме

«Повторное отображение списка контактов при каждом нажатии клавиши»

Предлагаемое решение

Используйте debounce, чтобы отложить вызов. Вот подробная статья о том, что делает debounce. Debounce задержит обработку вашего ввода до определенного периода задержки. Это предотвратит дополнительные повторные отрисовки, которые могут произойти, когда пользователь быстро набирает текст в строке поиска.

debounce функция доступна в большинстве библиотек утилит, включая loda sh .

...