H5开发问题总结（基于React开发）

1、事件监听里无法获取到state的最新值

onst [star, setStar] = useState<any>([0, 0, 0, 1, null]); 
//初始版本：
  useEffect(() => {
    starRef.current.addEventListener("animationstart", () => {
      console.log('动画开始');
    })
    starRef.current.addEventListener("animationend", () => {
      console.log('动画结束');
      if (star[4] && typeof star[4] === 'function') {
        const callFunc = star[4];
        callFunc();
      }
      setStar([0, 0, 0]);
    });
  }, []);

// 上面代码的问题是：由于闭包原因读取的star值一直是初始值[0, 0, 0, 1, null]，所以导致回调函数一直未能被执行

  useEffect(() => {
    starRef.current.addEventListener("animationstart", () => {
      console.log('动画开始');
    })
    starRef.current.addEventListener("animationend", () => {
      console.log('动画结束');
      if (star[4] && typeof star[4] === 'function') {
        const callFunc = star[4];
        callFunc();
      }
      setStar([0, 0, 0]);
    });
  }, [star]);
// 改进之后确实能读取到最新的值了，但是start一改变就会被重新添加事件监听，因为每次添加的事件监听都是新的函数，而且没有对事件监听进行解绑，导致回调函数执行多次
// 于是又换成了这样：
const  start = () => {
      console.log('动画开始');
}  

Const end = () => {
      console.log('动画结束');
      if (star[4] && typeof star[4] === 'function') {
        const callFunc = star[4];
        callFunc();
      }
      setStar([0, 0, 0]);
}

useEffect(() => {
    starRef.current.addEventListener("animationstart",start)
starRef.current.addEventListener("animationend",end);

return ()=>{
starRef.current. removeEventListener("animationstart",start)
starRef.current. removeEventListener("animationend",end);
}
  }, [star]);

// 经过这样之后虽然解决了，但是每次start值改变都需要重新绑定解绑还是不好，所以最终的解决方法是这样的：

const starPromRef = useRef<any>();
 starPromRef.current = star;
// 给了一个ref指向star，这样就能时刻监听到star的最新值
  useEffect(() => {
    starRef.current.addEventListener("animationstart", () => {
      console.log('动画开始');
    })
    starRef.current.addEventListener("animationend", () => {
      console.log('动画结束', starPromRef.current);
      const starProm = starPromRef.current;
      if (starProm[4] && typeof starProm[4] === 'function') {
        const callFunc = starProm[4];
        callFunc();
      }
      setStar([0, 0, 0]);
    });
  }, []);

2、设置滚动条样式

.ranking::-webkit-scrollbar { /* 滚动条整体样式 */
        width: 0.06rem;     /*高宽分别对应横竖滚动条的尺寸*/
         height: 0.06rem;
    }
     
 .ranking::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
       border-radius: 0.1rem;
       background: #0CACC2;
   }

3、pointer-events针对HTML元素的使用

• none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。
• auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。
• inherit：将使用 pointer-events 元素的父级的值。

具体使用看：https://zhuanlan.zhihu.com/p/71865866

我主要是使用这个属性来解决事件穿透