如何防止 React 子组件重新渲染？答案

【问题标题】：How to prevent React Child Component from Re-Rendering?如何防止 React 子组件重新渲染？
【发布时间】：2021-07-17 21:26:23
【问题描述】：

我是 React 新手，正在尝试在个人项目上进行练习，但我遇到了这个问题。我看到很多关于同一主题的问题，但我找不到任何与我的问题相关的类似 Q/A。我有一个父组件，我想在 redux 商店的特定条件下呈现它。还有另外两个子组件 {Bookmarks, TOC} 应该在同一商店的其他两个相关条件下呈现，问题是，当其他三个条件发生变化时，第三个子组件 {FontAwesomeLicense} 会呈现。

这是包含上述组件的 App.js 文件：

import Bookmarks from './components/widgets/bookmarks';
import MapInfo from './components/widgets/info';
import MyMap from './components/widgets/map';
import Navbar from './components/ui/navbar';
import { useSelector } from 'react-redux';
import LandingPage from './components/ui/landing';
import TOC from './components/widgets/toc';
import MyToast from './components/ui/toast';
import FontAwesomeLicense from './components/ui/license';
function App() {
    const login = useSelector(state => state.login.isLogged);
    const showBookmark = useSelector(state => state.bookmarks.visibility);
    const showTOC = useSelector(state => state.toc.visibility);
    return (
        <div className="App">
            <Navbar />
            {!login && <LandingPage />}
            {login && <>
                <MyMap />
                <MapInfo />
                <MyToast />
                {showBookmark && <Bookmarks />}
                {showTOC && <TOC />}
            </>}
            <FontAwesomeLicense />
        </div>
    );
};
export default App;

我在这里做错了什么？我真的很感激任何答案。 :)

【问题讨论】：

我猜你可以为你的 Navbar 和 FontAwesomeLicense 之间的所有东西制作一个组件。这样，父级不会发生任何变化，也不会重新渲染。
所以这确实解决了您的问题？
不是我所期望的，但是是的，它确实解决了它。;)
好吧，我很高兴，很乐意提供帮助。我添加了一个答案，因此您可以将其标记为已解决。

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

当您为 Navbar 和 FontAwesomeLicense 之间的所有内容创建组件时，只有该组件需要重新渲染，因为在父组件中不会检测到任何更改。

【讨论】：