React 和 react-router。如果我创建一个组件，它将调用 render()。如果不是组件，则没有render()是很好的。太疯狂了

Question

这是Sandbox 的链接

我有这样的简单代码：

边栏.js：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Menu from "./Menu";
class SidebarExample extends Component {
render() {
console.log("Sidebar - render()", new Date());
return (
<Router>
<div>
<div>
If I uncomment the below component Menu the render() method of the component is called everytime I change the link. Why? In the Menu component the is the same html code below. What is going on?
{/*<Menu />*/}
<ul>
<li>
<NavLink exact to="/">
Home
</NavLink>
</li>
<li>
<NavLink to="/bubblegum">Bubblegum</NavLink>
</li>
<li>
<NavLink to="/shoelaces">Shoelaces</NavLink>
</li>
</ul>
</div>
</div>
</Router>
);
}
}
export default SidebarExample;

菜单.js：

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
class Menu extends Component {
render() {
console.log("Menu - render()", new Date());
return (
<ul>
<li>
<NavLink exact to="/">
Home
</NavLink>
</li>
<li>
<NavLink to="/bubblegum">Bubblegum</NavLink>
</li>
<li>
<NavLink to="/shoelaces">Shoelaces</NavLink>
</li>
</ul>
);
}
}
export default Menu;

如果我取消注释组件，那么每次更改链接时都会调用组件的render()方法。为什么？在菜单组件中，下面有相同的html代码。

发生了什么事

我疯了！

Answer 1

测试了一段时间后。。。我得出的结论是，render()函数，至少对于v4，显然总是在路由更改时运行。。。从技术上讲，它必须始终运行，以防子组件中有路由器。

然而，仅仅因为render()在每次路由更改时都在运行，并不意味着实际的组件正在重建。当您尝试在componentDidMount()、componentWillUnmount()甚至constructor()中控制台日志时，这一点更为明显。

以下是一个得出该结论的测试：https://codesandbox.io/s/oxz8j04vnz