如何防止在 React Hooks 中状态更改后重新渲染？

Question

我正在尝试构建一个应用程序，但问题是当我更改状态时，所有组件都会重新渲染。

const App=()=>{
   const [showMenu,setshowMenu]=useState(false)
   

 return(
     <>

     <Header showMenu={showMenu} setShowMenu={setShowMenu}/>

     <MainArea/>

     {showMenu ? <Menu/> : null}

     <Footer/>

    </>
 )

}

当我通过按钮将 showMenu 设置为 true 时，会出现一个菜单，但问题是我的所有组件（页眉、主区域、页脚）都会重新渲染。我不想要这样。我怎么解决这个问题？

Answer 1

您可以使用useMemo挂钩。

它可以防止特定的 jsx 内容重新呈现，即使这些 jsx 内容/组件使用的状态已更新。

const App=()=>{
// you can only memoize parts that do not require use of the updated variable in this case. It means that Header cannot be memoized.

const mainArea = React.useMemo( () => <MainArea/>, [] );

const footer = React.useMemo( () => <Footer/>, [] );

   const [showMenu,setShowMenu]=useState(false)
   

 return(
     <>

     <Header showMenu={showMenu} setShowMenu={setShowMenu}/>

     {mainArea}

     {showMenu ? <Menu/> : null}

     {footer}

    </>
 )

}

编辑：

真的需要showMenu的状态吗？或者我们只能将setShowMenu传递给它？如果是这样，那么您还可以将 Header 组件记忆到备忘录块中，如下所示：

const header = React.useMemo( () => , [] );