使用 React.memo 防止重新渲染答案

【问题标题】：Preventing rerenders with React.memo使用 React.memo 防止重新渲染
【发布时间】：2020-12-22 11:09:14
【问题描述】：

我已经构建了一个网络应用程序，用户可以在其中拥有不同页面的个人资料。在所有页面中都有个人资料图片和横幅，我希望它们只呈现一次。

现在，每次用户更改页面时，个人资料图片和横幅都会刷新。我想阻止它。

现在如何运作：

我想要什么：

我一直在玩 React.memo，但我无法让它工作。

每个父页面（预设、商店和课程）获取所有数据（个人资料图片、横幅...）。

然后我将数据传递给子组件 Banner 和 ProfilePicture。

这是我的横幅组件代码（横幅道具是一个url类型的字符串）：

import React, { useState, useEffect } from 'react';
import { Container, Row, Col} from "react-bootstrap";

const Banner = ({banner}) => {

const [width, setWidth] = useState(window.innerWidth);
const breakpoint = 620;


useEffect(() => {
    window.addEventListener("resize", () => setWidth(window.innerWidth));
},[])

return ( 
    <>
        <Container style={{ maxWidth: "100%" }}>
            <Row>
                <Col className="pl-0 pr-0">
                    {width < breakpoint ?
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center center",
                            height: "40vw",
                            display: "flex",
                            alignItems: "center",
                        }}
                        className="justify-content-center"
                        >
                        
                        </div>
                    :    
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center center",
                            height: "25vw",
                            display: "flex",
                            alignItems: "center",
                        }}
                        className="justify-content-center"
                        >
                        
                        </div>
                    }
                </Col>
            </Row>
        </Container>
    </>
 );
}

export default React.memo(Banner);

在父组件（所有页面）中，我获取数据并将其传递给横幅组件，如下所示：

<Banner banner={banner}/>

我认为横幅首先是未定义的，然后是获取的 url，所以道具每次都从未定义变为字符串，这就是 React 备忘录不起作用的原因。

我不知道如何解决这个问题。

【问题讨论】：

你渲染Banner组件多少次。它是否存在于每个父组件中？如果是这样，它将在您每次交换父组件时呈现。如果您只想渲染一次，则必须将其拉出到根组件，该组件会渲染 Presets、Store 和 Courses，并在那里渲染一次。然后备忘录就可以正常工作了
@szczocik 我的横幅组件存在于每个父组件中。我想知道如何只制作一个父组件并仍然管理页面。
刚才如何在父组件之间导航？你使用 react-router 还是只使用条件渲染？
@szczocik 我使用 react-router，我有这 3 页。我怎么能有 3 页只有 1 个父母？谢谢你帮助我

标签： javascript reactjs react-hooks create-react-app react-usememo

【解决方案1】：

我已经解决了我自己的问题。我不确定这是最好的答案，但这就是我所做的：

使用 react-router 我添加了这条路由：/:username/:page

然后我使用 props.match.params.page 访问页面名称并根据它更改子组件。

【讨论】：