为啥我的标题每次渲染都已经使用 React.memo？

Posted 2023-02-21

【中文标题】为啥我的标题每次渲染都已经使用 React.memo？

【英文标题】：why my header render every time already use React.memo?为什么我的标题每次渲染都已经使用 React.memo？

【发布时间】：2020-08-06 04:20:18

【问题描述】：

你能告诉我why my header render every time already use React.memo ?我有两个部分my app and user当我从my apps导航到userheader重新渲染为什么？

这是我的代码

https://codesandbox.io/s/fancy-microservice-gl734?file=/src/header.js

import React,  useEffect, useState  from "react";
import  withRouter  from "react-router-dom";

const Header = React.memo(function() 
  console.log("HeaderHeaderHeaderHeaderHeader");

  return <div>header</div>;
);

export default withRouter(Header);

当您运行应用程序时，它会显示apps，但是当您单击user 时，它会显示user 页面..查看控制台标题重新呈现

我试过pure component 还是同样的问题

import React,  PureComponent  from "react";

class Header extends PureComponent 
  render() 
    console.log("HeaderHeaderHeaderHeader");
    return <div>header</div>;
  


export default Header;

https://codesandbox.io/s/fancy-microservice-gl734?file=/src/test.js:0-202

【问题讨论】：

这会给您带来问题吗？随着状态的变化，React 会频繁地重新渲染。

我的问题是停止额外重新渲染..!!哪里改变了状态？

但是为什么重新渲染会出现问题？这在 React 中是一件非常正常的事情，也是它存在的部分核心原因。因此，除非重新渲染实际上给您带来了错误，否则我不会担心。

重新渲染造成性能问题，..

只有当你测量过它才是一个性能问题。 react-dev-tools profiler 告诉你重新渲染的原因。你可以看看那个。

【参考方案1】：

不幸的是，您尝试做的并不是 React 的工作方式。

React.memo 允许您在父组件使用相同的道具渲染子组件时避免运行子组件的渲染函数。如果reconciliation 将 parent 替换为新组件，则新父级不会重用相同的记忆组件，即使它与最后一个父级渲染相同的子级。

所以对于你的react-router，当你切换路由时，每个组件都会被重新渲染。 DOM 可能仍会避免不必要的更新，但您的渲染函数仍会被调用。

如果您将<Header/> 组件拉出树的更高位置，您或许可以避免重新渲染。