javascript - 当非属性或状态变量发生变化时，React 如何知道渲染组件？

Question

我有以下导航链接代码，它或多或少只是处理显示事件状态。

这很完美!我的问题是:为什么？如您所见，我正在根据与此链接的 url 匹配的 window.location.pathname 检查链接是否应该处于事件状态。在渲染函数中，我检查此链接是否处于事件状态(调用 activeIndicator() 时)。

似乎每次 window.location.pathname 更新时都会重新呈现。当组件内的变量发生任何变化时，React 的生命周期方法 shouldComponentUpdate() 是否会以某种方式更新？可能值得注意的是，我在我的应用程序中使用 React Router，单击链接确实会触发 React Router。

这样做不安全或脆弱吗？在容器中跟踪状态是否一定更好？或者手动覆盖 shouldComponentUpdate()？

非常感谢任何关于这是如何“神奇地”工作的信息!

谢谢!

const Navlink = ({text, url}) => {

  const isActive = () => {
    return window.location.pathname === url;
  }

  const activeIndicator = () => {
    if( isActive() ) {
      return (
        <div className="active-indicator">
          <svg height="6" width="6">
            <circle cx="3" cy="3" r="3" fill="black" />
          </svg>
        </div>
      );
    }

    return null;
  }

  return (
    <span className="navbar-link">
      <Link to={ url } style={ (isActive()) ? {color:"black"} : {} }>
        { text }
      </Link>
      { activeIndicator() }
    </span>
  );
}

更新

为了更好地理解答案，了解导航链接的嵌套方式可能会有所帮助。

顶层:

<Router>
  <Main />
</Router>

主要内容:

<div>
  <Navbar />

  <Route exact path="/" component={Home} />
  ...

Navlinks 在 Navbar 中。

Answer 1

It might be worth noting that I am using React Router in my application and clicking a link does trigger React Router.

这就是你的答案! react 路由器 sends updated props to your components当它路由到他们时。因此，当您触发链接时，它会使用一些触发渲染的 Prop 路由到组件。