react监听URL的正确方式
<h2 id="h2_2">1、原生js硬刚</h2><pre><code class="hljs javascript">componentDidMount(){
<span class="hljs-built_in">window.addEventListener(<span class="hljs-string">'hashchange', <span class="hljs-keyword">this.routerEvent);
}
componentWillUnmount(){
<span class="hljs-built_in">window.removeEventListener(<span class="hljs-string">'hashchange',<span class="hljs-keyword">this.routerEvent);
}
routerEvent = <span class="hljs-function">(<span class="hljs-params">e)=>{
<span class="hljs-comment">// e.target.location.hash.replace("#","")
<span class="hljs-comment">// 去掉#就能获取即将跳转的那个路由的url了
}
</span></span></span></span></span></span></span></span></span></span></code></pre>
<blockquote>Tips：addEventListener之后一定要remove，否则跳转路由后，原有的事件又没消除，<br>会导致注册了越来越多的事件；<br>另外，removeEventListener的第二个参数指向的函数<strong>必须</strong>要跟addEventListener传入的函数是同一个函数（这点非常容易错）</blockquote>
<p>这种方式还有种缺点，它只监听到了hash的变化，<br>而如果是#aaa?page=1跳到了#aaa?page=2，监听不到；</p>
<p><span style="position: relative; left: -100000px">vi设计http://www.maiqicn.com</span>
<span style="position: relative; left: -100000px">办公资源网站大全https://www.wode007.com</span></p>
<h2 id="h2_3">2、react router自带的history.listen</h2>
<pre><code class="hljs javascript">componentDidMount(){
<span class="hljs-keyword">this.props.history.listen(<span class="hljs-function"><span class="hljs-params">route => {
<span class="hljs-built_in">console.log(route); <span class="hljs-comment">// 这个route里面有当前路由的各个参数信息
});
}
</span></span></span></span></span></code></pre>
<p>但是，发现，这个history.listen，在组件销毁的时候并不会销毁，事件仍然存在。<br>如果多次进入同一个路由，这个componentDidMount重复触发，listen重复绑定，跟addEventListener差不多了，<br>而也没有找到removeEventListener方法。。。<br>打印一下this.props.history</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">console<span class="hljs-selector-class">.log(<span class="hljs-selector-tag">this<span class="hljs-selector-class">.props<span class="hljs-selector-class">.history)
</span></span></span></span></span></code></pre>
<p><img src="http://api.fly63.com/vue_blog/public/Uploads/20200302/5e5cfb0e03257.jpg"></p>
<p>我们可以看到，有listen方法，但是却没有找到解绑的方法；<br>通过百度没有找到方法，文档里面也没写怎么解绑，<br>一筹莫展之际，那只能用最后一个方法：翻源码。</p>
<p>说干就干，找到了/react-router/cjs/react-router.js</p>
<p><img src="http://api.fly63.com/vue_blog/public/Uploads/20200302/5e5cfb18e5b1c.jpg"></p>
<p><img src="http://api.fly63.com/vue_blog/public/Uploads/20200302/5e5cfb1c73002.jpg"></p>
<p><img src="http://api.fly63.com/vue_blog/public/Uploads/20200302/5e5cfb21097e3.jpg"></p>
<p>到这里我们可以推测，<br>this.props.history.listen()这个函数执行之后，返回值为一个unlisten函数，<br>unlisten就是listen的解绑函数！<br>于是代码变成了这样</p>
<pre><code class="hljs javascript"><span class="hljs-keyword">let UNLISTEN;
<span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">Client <span class="hljs-keyword">extends <span class="hljs-title">React.<span class="hljs-title">Component {
...,
componentDidMount(){
<span class="hljs-comment">// UNLISTEN变量用来接收解绑函数
UNLISTEN = <span class="hljs-keyword">this.props.history.listen(<span class="hljs-function"><span class="hljs-params">route => {
<span class="hljs-built_in">console.log(route);
});
}
componentWillUnmount(){
UNLISTEN && UNLISTEN(); <span class="hljs-comment">// 执行解绑
}
}</span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre><br><br>
来源：https://www.cnblogs.com/xiaonian8/p/13764821.html
頁:
[1]