react默认路由中的一个bug

作为一个初学框架的前端小白，自然免不了在使用框架做demo时出现各种问题。今天就介绍一个关于react-router中默认路由的一个bug。

<canvas width="300" height="300" ref="canvas"></canvas>

错误示例：
componentDidMount() {
setInterval(this.clock.bind(this), 1000);
}

clock() {
this.canvas = this.refs.canvas;
this.ctx = this.canvas.getContext(“2d”);
this.drawClock();
}
正确示例：

componentDidMount() {
this.canvas = this.refs.canvas;
this.ctx = this.canvas.getContext(“2d”);
setInterval(this.clock.bind(this), 1000);
}

clock() {
this.drawClock();
}

这两段代码的区别就是在于将获取canvas标签是否写在定时器内部。
当获取canvas在定时器内部时，每隔一秒总是会执行一次获取canvas标签。而这段代码所在的组件走的是默认路由，所以走其他路由时仍然会加载默认路由所对应的组件。而其他页面上没有ref为canvas的元素，所以在定时器不断地执行时，便获取不到该元素。便会出现报错。
而我们将获取canvas标签的语句写在定时器外时，由于在首页上会加载默认路由，canvas只需获取一次即可，便不会进入其他页面时再次获取canvas标签。
这也是我在初学react中遇到的一个比较重要的bug，想了一天才想明白其中原因。