Question

的链接

我有这样简单的代码：

Sidebar.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;

Menu.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（）方法。为什么？在Menu组件中，下面有相同的html代码。

发生了什么事？

我失去了理智！

Answer 1

经过一段时间的测试......我得出的结论是render()功能，至少对于v4来说，显然总是会在路线改变时运行......从技术上讲，它必须始终运行，以防子组件中有路由器。

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

以下是对此结论的测试：https://codesandbox.io/s/oxz8j04vnz

反应和反应路由器。如果我创建一个组件，则调用render（）。如果不是一个组件，没有render（）就可以了。这很疯狂

1 个答案: