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

【问题标题】：Will component Re-Render when the path is changed?路径改变时组件会重新渲染吗？
【发布时间】：2023-03-05 18:34:01
【问题描述】：

我的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

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

我说的对吗？

【问题讨论】：

是的。这就是它的工作方式！相应地卸载/重新安装组件！

标签： reactjs typescript

【解决方案1】：

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

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

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

【讨论】：