next.js ReactJS导致不必要的重新渲染

rn0zuynd 于 9个月前发布在 React

关注(0)|答案(1)|浏览(145)

我在ReactJS中遇到了一个问题，在我的应用程序中发生了不必要的重新渲染。我有一个侧边栏打开状态，我在Header组件中管理。我将set函数传递给Header以打开/关闭侧边栏，并将状态本身传递给侧边栏组件。
但是，组件内部的useEffect每次都会重新呈现，即使侧边栏状态没有改变。
！！也在我的每一页，它的发生，每当我打开和关闭

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const handleSidebarOpen = () => {
    setSidebarOpen(!sidebarOpen);
  }

  {isLogin && <Header openSidebar={handleSidebarOpen} />}
    <Box display="flex">
      <SidebarDrawerExample sidebarOpen={sidebarOpen} />
        <Container>
          <Routes>
            <Route path="/now-playing" element={
              <ProtectedRoute>
                <MovieList category="now-playing" /> 
              </ProtectedRoute>
            } />

字符串

MovieList.tsx

useEffect(() => {
  console.log('category', category);
}, []);

型

next.js

来源：https://stackoverflow.com/questions/77717969/reactjs-causing-unnecessary-re-renders

1条答案

按热度按时间

ne5o7dgx1#

可能是因为SidebarOpen函数是在App组件内部创建的，当App重新呈现时，它可能会导致Header组件不必要的重新呈现。为了优化这一点，您可以使用useCallback钩子来记住SidebarOpen函数。
试试这个代码：

import React, { useState, useCallback } from 'react';

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const handleSidebarOpen = useCallback(() => {
    setSidebarOpen(prevState => !prevState);
  }, []);

  return (
    <>
      {isLogin && <Header openSidebar={handleSidebarOpen} />}
      <Box display="flex">
        <SidebarDrawerExample sidebarOpen={sidebarOpen} />
        <Container>
          <Routes>
            <Route path="/now-playing" element={
              <ProtectedRoute>
                <MovieList category="now-playing" />
              </ProtectedRoute>
            } />
          </Routes>
        </Container>
      </Box>
    </>
  );
}

const Header = ({ openSidebar }) => {
};

const SidebarDrawerExample = ({ sidebarOpen }) => {
  // Your SidebarDrawerExample component code
};

const MovieList = ({ category }) => {
  useEffect(() => {
    console.log('category', category);
  }, [category]);
};

字符串

赞(0）回复(0）举报 9个月前

我来回答

next.js ReactJS导致不必要的重新渲染

1条答案

相关问题

热门标签

最新问答