如何防止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之间的所有内容制作组件时，只有该组件需要重新渲染，因为在父组件中不会检测到任何更改。