useEffect在DatePicker组件中的实际应用

在移动端的DatePicker组件当中，有一个滚轮子组件，用于滚动获取对应的数值，效果如下：

对于每一个滚轮子组件，需要分别监听 onTouchStart ， onTouchMove ， onTouchEnd 事件，以获取手指移动的信息。

在iOS当中这样做会有一个问题，那就是当我们在DatePicker中touchmove时，背后的body由于safar浏览器的橡皮筋特性也会随之移动，这就会出现屏幕随着滚轮一起移动的怪异景象。

因此，我们需要在DatePicker组件加载时取消body的touchmove的默认行为，组件卸载时清除此副作用。此时 useEffect 就派上用场了。

  useEffect(() => {
    const bodyTouchMoveHandler = (e: TouchEvent) => {
      e.preventDefault()
    }
    document.body.addEventListener('touchmove', bodyTouchMoveHandler, {passive: false})
    return () => {
      document.body.removeEventListener('touchmove', bodyTouchMoveHandler)
    }
  }, [])