Question

我正在开发一个社交媒体应用程序，其中我有一个具有以下结构的容器组件

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

选择栏上的按钮决定了为了这个问题显示哪个 FlatList 让我们说消息 FlatList 与帖子 FlatList

这两个 FlatList 具有不同的侦听器和数据，因此它们需要是自己的组件，但它们共享相同的 ListHeaderComponent，这是一个类似于 snapchat 故事的功能

问题是当用户在两个 FlatLists 之间切换时，故事会闪烁，因为组件被重新渲染，因为它的两个不同的 FlatLists

标题需要作为 ListHeaderComponent 位于 flatlist 内，因为当用户向下滚动时，故事不应该粘在顶部

有什么办法可以防止这种重新渲染？

我试过 React.memo 但没有用

Answer 1

您可以使用 React.memo

防止重新渲染同一组件

您可以定义您的 header 组件并将其作为道具传递，例如：

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 并单击按钮以更改状态并查看控制台输出，它不会重新呈现标题组件。

防止重新渲染共享 ListHeaderComponent

1 个答案: