javascript - 为什么每次我的标题渲染都使用了 React.memo？

Question

你能告诉我为什么我的标题每次渲染都已经使用了 React.memo 吗？ 当我从 导航时，我有两个部分 my app and user我的应用程序 到 user header 重新呈现为什么？

这是我的代码

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 页面。请参阅控制台标题重新渲染

我试过纯组件还是一样的问题

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

Answer 1

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

React.memo如果父组件正在使用相同的 Prop 渲染子组件，则允许您避免运行子组件的渲染函数。如果reconciliation用新组件替换父级，新父级不会重用相同的内存组件，即使它呈现与最后一个父级相同的子级也是如此。

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

如果你拉 <Header/>组件在树中更高的位置，您可以避免重新渲染。