Блог

Я работаю над приложением для социальных сетей, где у меня есть компонент контейнера, который имеет следующую структуру

 <MyContainer>
   <SelectionBar/>
   {condition? <FlatListA header={header}/> : <FlatListB header={header}/>}
<MyContainer/>
 

на панели выбора есть кнопки, которые определяют, какой плоский список отображать для целей этого вопроса, скажем, плоский список сообщений против плоского списка сообщений

у этих двух плоских списков разные слушатели и данные, поэтому они должны быть их собственным компонентом, но они используют один и тот же компонент ListHeaderComponent, который является функцией, аналогичной snapchat stories

проблема в том, что когда пользователь переключается между двумя плоскими списками, истории мерцают, потому что компонент повторно отображается из-за двух разных плоских списков

заголовок должен находиться внутри flatlist как ListHeaderComponent, потому что, когда пользователь прокручивает вниз, истории не должны прилипать к началу

есть ли какой-либо способ предотвратить повторный рендеринг?

Я пробовал React.memo, но это не сработало

Вы можете предотвратить повторный рендеринг того же компонента с помощью React.memo

Вы можете определить свой header компонент и передать его как prop, например:

 import { memo } from "react";
import FlatListA from "./FlatListA";
import FlatListB from "./FlatListB";

const header = memo((props) => {
  console.log("header render");
  return <h1>this is header</h1>;
});

export default function App() {
  return (
    <div className="App">
      <FlatListA header={header} />
      <FlatListB header={header} />
    </div>
  );
}
 

и вы можете использовать его в своих FlatList компонентах, таких как:

 import { useState } from "react";

export default function FlatListA(props) {
  console.log("flatlista render");

  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <props.header />
      FlatlistA {toggle}
      <button onClick={() => setToggle(!toggle)}>toogle state</button>
    </div>
  );
}
 

Вы можете взглянуть на этот пример codesandbox и нажать кнопки, чтобы изменить состояние, и увидеть, что консоль выводит, что она не повторно отображает компоненты заголовка.