记录一次data-*自定义属性的使用

h5为我们提供了一个data属性，"data-*"作为前缀，可以让所有的html元素都支持自定义的属性

设置属性：document.getElementById('aa').setAttribute("data-*", true)

获取属性：document.getElementById('aa').getAttribute("data-*")

 

问题：react中组件嵌套层级，鼠标移入dom给dom添加一个悬停样式，最初使用mouseover触发dispatch一个action记录当前的hover控件id，在控件再次render时，判断当前的hover id和选中id是否相同并添加class。因为频繁的操作dom导致性能问题

解决：当mouseover时为dom添加自定义的属性data-hover，通过类选择器中的属性选择添加样式

// js
onMouseOver = (e) => {
this.dom.setAttribute('data-hover', true)
}

// css
[data-hover='true'] {
outline: 1px dashed rgba(40,114,252,1) !important ;
outline-offset: -1px;
background:rgba(40,114,252,0.05);
}