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

Question

我是 React 的新手并试图在个人项目上练习，但我有这个问题。 我看到很多关于同一主题的问题，但找不到与我的问题相关的任何类似问答。 我有一个父组件，我想在 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;

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

Answer 1

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