Question

我的 App 组件定义如下所示：

function App() {
    return (
        <Router>
            <Navbar/>
            <Switch>
                <Route path="/howitworks">
                    <HowItWorks/>
                </Route>
                <Route path="/aboutus">
                    <AboutUs/>
                </Route>

                <Route path="/">
                    <Home/>
                </Route>
            </Switch>
            <Footer/>
        </Router>
    )
}

我有一个关于路由和重新渲染的问题。

例如，当我从 / 路由到 /howitworks 时，将渲染组件 <HowItWorks/>。从 / 路由回 /howitworks，是否会重新渲染 <Home/> 组件？

<Home/> 组件仅包含文本。它不包含任何逻辑。

更新

我在 https://codesandbox.io/s/react-router-forked-2mp45 上创建了一个示例。

当您考虑 about 组件时，它是如何定义的：

import React, { useState } from "react";

const About = () => {
  const [state, _] = useState(2);

  React.useEffect(
    (_) => {
      console.log("state changed");
    },
    [state]
  );

  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

export default About;

并且每次点击 /aboutus 时，它始终显示消息：

state changed

这对我来说意味着，每次路径改变时，都会重新渲染。

我说得对吗？

Answer 1

是的，在路径更改时会重新渲染。重新渲染本质上意味着再次绘制屏幕。

如果您考虑再次安装组件，则组件也会在路径更改时卸载。

这是一个反映https://codesandbox.io/s/react-router-forked-nlqzg?file=/components/About.js

的例子

当路径改变时组件会重新渲染吗？

1 个答案: