通常对于componentWillReceiveProps
,认为是外层Update时才会触发。
对于使用了React-Router的场景,通常也会理解为,当路由发生跳转时才会触发。
而实际上,当页面发生hash跳转(例如点击了<a href="#">XXX</a>
)时,虽然路由没有跳转,但也会触发componentWillReceiveProps
。
场景
- 使用了
componentWillReceiveProps
- 在点击诸如
<a href='#xxx'>XXX</a>
时会触发componentWillReceiveProps
- 实际不希望此时触发
原因
React的componentWillReceiveProps
触发实际受2个条件制约:
Component.props
更新Component.context
更新
而每次URL的pathname变化或hash变化,React-Router都会触发context
里的router
变化。
从而会触发componentWillReceiveProps
解决方案
为避免受上述原因影响,建议在componentWillReceiveProps
检查props
是否发生变化。
componentWillReceiveProps(nextProps, nextContext){
if(nextProps !== this.props){
//path变化会执行这里
//仅hash变化不会执行这里
}
}
(正文完)