React组件状态异常：复用组件hover效果无法实现求助

我之前碰到过完全一样的坑：参照示例实现了div的hover效果，但是把代码放到可复用组件（同一页面会多次实例化）里后，hover效果完全没反应，哪怕直接照搬示例代码也不行。

折腾了好一阵才找到问题根源——我在组件里用了shouldComponentUpdate做性能优化，但完全没把state.isHovering状态的变化纳入更新判断条件！

原来的shouldComponentUpdate只对比了props的差异，当hover事件触发isHovering状态改变时，组件因为没检测到这个state变化，根本不会重新渲染，hover效果自然就出不来。

修正后的shouldComponentUpdate代码如下：

shouldComponentUpdate(nextProps, nextState) {
  return (
    nextProps.post.id !== this.props.post.id ||
    nextProps.screenshotClickUrl !== this.props.screenshotClickUrl ||
    nextProps.onImageClick !== this.props.onImageClick ||
    nextProps.handleMouseHover !== this.props.handleMouseHover ||
    nextState.isHovering !== this.state.isHovering
  )
}

只要把nextState.isHovering !== this.state.isHovering加入返回条件，组件就能在hover状态变化时正常重新渲染，hover效果也就生效了。

内容的提问来源于stack exchange，提问作者mowtheone