Блог

Главная - Вопросы по программированию - Почему react-window повторно отображает список при каждом событии useState?

Почему react-window повторно отображает список при каждом событии useState?

#reactjs #react-window

Вопрос:

Я не понимаю, почему react-window перерисовывает список для каждого(всех) событий useState, значения которых даже не связаны с самим списком. Не мог бы кто-нибудь объяснить, пожалуйста, как это внутренне связано и как я могу избежать повторной визуализации?

повторный рендеринг состояния использования окна react-window

 import React, { useState  } from "react";
import { FixedSizeList, areEqual } from "react-window";

function App() {

  const [count, setCount] = useState(0);

  const handleOnClick = () => {
    console.log("PUSHED ME");
    setCount(count 1) // why does it trigger a re-render of FixedSizeList ?
  }

  const Row = React.memo(props => {
    const { index, style } = props;
    return <div style={style}>Row {index}</div>;
  }, areEqual);

  return (
    <div className="App">
      <FixedSizeList
        height={200}
        itemCount={100}
        itemSize={50}
        width={'100%'}
      >
        {Row}
      </FixedSizeList>
   
      <div onClick={handleOnClick}>Push Me</div>
    </div>
  );
}

export default App;

Я также попытался использовать второй аргумент react-window AreEqual, но это не помогло. https://react-window.vercel.app/#/api/areEqual

Любые намеки на то, как это можно решить, высоко ценятся! Заранее большое спасибо!

Ответ №1:

Выйдите Row за пределы App . Когда компонент повторно отправляет все свои переменные, они объявляются повторно, что означает новые значения, за исключением тех случаев, когда они были сохранены соответствующим крючком, например useMemo , useCallback . Вы получаете новое значение для Row каждого рендеринга.

React.memo это не крюк для запоминания, это компонент более высокого порядка, который контролирует, когда новые реквизиты должны передаваться указанному компоненту. Он должен быть объявлен вне цикла рендеринга React (как и все компоненты), чтобы правильно функционировать.

Метки: