React Router上的组件和渲染行为相同。找不到差异[重复项]

Question

此问题已经在这里有了答案：

react router difference between component and render（4个答案）

已关闭1分钟前。

这里是我的主要App.js文件，用于了解React Routers：

import React, { Component } from "react";

import { Route, Switch, NavLink } from "react-router-dom";
import About from "./About";
import Dog from "./Dog";
import Contact from "./Contact";
import "./App.css";
const Hater = () => <h1>I absolutely hate Dogs!</h1>;

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <NavLink
          exact
          activeClassName="active-link"
          to="/dog/s"
          className="Nav-link"
        >
          Dog(shamen)
        </NavLink>
        <NavLink
          exact
          activeClassName="active-link"
          to="/dog/m"
          className="Nav-link"
        >
          Dog(morko)
        </NavLink>

        <Switch>
          <Route exact path="/dog/s" component={() => <Dog name="shamen" />} />
          <Route exact path="/dog/m" render={() => <Dog name="Morko" />} />
        </Switch>
      </div>
    );
  }
}

这里有狗组件：

import React, { Component } from "react";

export default class Dog extends Component {
  componentDidMount() {
    console.log("Dog Did Mount");
  }
  componentWillUnmount() {
    console.log("Dog Did Unmonut");
  }
  render() {
    console.log("Inside Render");

    return (
      <div>
        <h1>This is the Dog's Page</h1>
        <h2>My name is {this.props.name} </h2>
        <img
          src="https://images.pexels.com/photos/1851164/pexels-photo-1851164.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
          alt="dog"
        />
      </div>
    );
  }
}

在Dog组件中，我使用console.log来了解它们之间的区别。所以根据反应的过程，当我使用

组件而不是React Router Switch上的渲染

，每次单击该组件文件都会一次遍及整个生命周期。另一方面，当首次单击渲染渲染引擎罩时，它将仅运行一次生命周期。但就我而言，两者的行为相同。

这里是css文件：

.App {
  text-align: center;
  justify-content: center;
}
.Nav-link {
  padding: 10px;
  margin: 10px;
  background-color: aqua;
}
.Nav-link:hover {
  background-color: pink;
}
.active-link {
  background-color: pink;
  border-bottom: 1px solid aquamarine;
}
img {
  width: 300px;
}

Answer 1

它们的行为不同

[当您使用组件（而不是下面的渲染器或子代）时，路由器使用React.createElement从中创建新的React元素给定的组件。也就是说，如果您向组件属性，您将在每个渲染中创建一个新组件。这个导致现有组件的卸载和新组件的安装安装而不只是更新现有组件。使用时用于内联渲染的内联函数，请使用render或儿童道具（下）。

docs