非小道具または状態変数が変更された場合、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> 
); 
} 

更新

良い答えを理解するために、それはNavlinksがネストされている方法を理解するのに役立つかもしれません。

トップレベル：

<Router> 
    <Main /> 
</Router> 

メイン：

<div> 
    <Navbar /> 

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

そしてNavlinksは、ナビゲーションバーの内側にあります。

Answer 1

アプリケーションでリアクタールーターを使用していて、リンクをクリックするとリアクタールーターがトリガーされます。

これはあなたの答えです！それがルータにルーティングされるときにルータsends updated props to your componentsに反応します。したがって、リンクをトリガーすると、レンダリングをトリガーするいくつかの小道具でコンポーネントにルーティングされます。