Question

我正在为我将从事的项目测试 react-router-dom 行为。我一直在查看组件安装行为，但遇到了一个无法解释的问题。我在他们的文档中找到的最接近的解释是：

"当您使用组件（而不是渲染或子组件，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您向组件 prop 提供内联函数，您将创建每次渲染都会有一个新组件。这会导致现有组件卸载并安装新组件，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用渲染或 children 属性（如下）。”

我从中得到的是，如果我向路由提供反应组件（而不是内联函数）作为路由组件，它应该只安装一次，然后更新安装的组件。在下面的代码片段中，~~看起来 Interval 组件再次被挂载，但从未卸载。~~看起来该组件每次都被重新挂载，就好像我传递了一个内联函数。< /p>

这是预期的行为吗？

~~如果是，我正在寻找不同的行为，无论是单次装载，还是在不再呈现组件时卸载。 react-router-dom 可以实现吗？~~

import React from 'react'
import {
  BrowserRouter as Router,
  Link,
  Switch,
  Route,
} from "react-router-dom";
import { Container, Col, Row } from 'reactstrap'

function RouteLinks() {
  return (
    <div>
      <div>
        <Row>
          <Col>
            <li>
              <Link to="/">None</Link>
            </li>
          </Col>
          <Col>
            <li>
              <Link to="/interval">interval</Link>
            </li>
          </Col>
          <Col>
            <li>
              <Link to="/about">about</Link>
            </li>
          </Col>
        </Row>
      </div>
    </div>
  );
}

export default function PageRouter() {
  return (
    <Container fluid={true}>
    <Router>
      <RouteLinks />
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/interval" component={Interval} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
    </Container>
  );
}

const Main = () => {
  return (
    <div>Main!</div>
  )
}

const About = () => {
  return (
    <div>About!</div>
  )
}
class Interval extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log('ticking')
    }, 1000)
    console.log('mounted')
  }
  componentWilUnmount() {
    console.log('unmounting')
    clearInterval(this.interval)
  }
  render() {
    return (
      <p>Interval</p>
    )
  }
}

路由反应组件什么时候挂载和卸载？

0 个答案: