小编cub*_*fox的帖子

当我尝试获取用户的滚动速度时，我在 Mac 和 Windows 之间得到不一致的结果。

重现

1. 打开此代码沙盒
2. 使用鼠标，向下滚动 1 个“刻度”（使用不具有平滑滚动功能的鼠标）

问题

使用完全相同的硬件（鼠标/显示器）和浏览器（chrome）：

• 在 Windows 上我得到的值为125
• 在 Mac 上我得到的值约为12

我需要一种方法来了解用户滚动的速度，从而为所有操作系统提供可比较的结果。

更多背景信息

• 这适用于“无限画布”类型的应用程序（如tldraw）。我想当用户向后滚动时“缩小”，当用户滚动时“放大”。
• 我想使用滚动速度（而不仅仅是滚动方向），因为否则感觉很笨拙
• 我知道这是可能的，因为Figma可以根据鼠标滚轮速度进行放大/缩小。虽然他们使用 webgl 所以不确定他们是否可以访问正常轮子事件没有的属性
• 我不能简单地检查 deltaY 是否 > 100，因为在 mac 上，当用户快速滚动时 deltaY 可能会超过 100
• 我尝试了这个问题的所有解决方案。它们都不能跨 mac/windows 运行

我一直在尝试在画布和 JavaScript 中重新创建这个项目。我无法破译原始代码，所以我从头开始。不同之处在于，我的项目在大约 2500 个粒子时开始滞后，而上面的项目则在 30000 个粒子时工作。

我将在下面粘贴我的整个代码，但这些是相关部分：

var particleContainer = []
var distance = 10


for(let i = 0; i< square.height/distance; i++){
    for(let j = 0; j< square.height/distance; j++){
    particleContainer.push( new Particle(square.x + i*distance,square.y + j*distance) )
}  
}

if(  c < 90  ){
            i.xVelocity = a/c * -20
            i.yVelocity = b/c * -20
        }else if(90 < c && c < 95){
            i.xVelocity = a/c * -1
            i.yVelocity = b/c * -1
        }else if(c2 !== 0){
            i.xVelocity …

我要完成以下任务：

myFunction = () => {
  this.setState(
    state => {
      const originalBar = state.bar;
      return {
        foo: "bar"
      };
    },
    () => ({ originalBar, newBar: state.foo }) //return this object
  );
};

otherFunction = () => {
  var originalValue = myFunction(); //access returned object (in child component)
};

setState不返回任何内容，我唯一能弄清楚该方法的方法是my function在setState回调中调用回调，但是，如果可能的话，我宁愿使用async等待。

我经常发现自己必须在映射数组之前构建长链以检查它是否已定义:

this.props.photos &&
this.props.photos.activePhotos &&
this.props.photos.activePhotos.map(...

如果我遗漏了this.props.photos &&,this.props.photos.activePhotos.length &&我的整个应用程序将崩溃,如果photos或activePhotos未定义.

有没有办法检查这些道具,而无需检查我的最终项目的每个父对象/数组？

直到现在在我的代码中，我有一个对象来表示页面上图像的所有数据

this.state = {
    img-1: {
        x: 0,
        y: 0,
        rotation: 0
    },
    img-2: {
        x: 20,
        y: 200,
        rotation: 50
    }
}

每次对象收到一个新的孩子时，它都会添加一个新img-id的状态，每次<img id=${id} update={this.update} />更新时都会更新。

将计算坐标或旋转等功能移动到他们自己的自定义钩子中会在可维护性和测试方面极大地改进我的代码，但我真的没有看到将所有这些数据存储在带有钩子的集中对象中的好方法。

据我了解，我必须设置一个新的

[img-1, setImg-1] = useState({ x: 0, y:0, rotation: 0 })

对于每个孩子，据我所知，这是不可能的，因为钩子必须在顶层声明或设置一个非常深的对象，更新起来有点笨拙：

[images, setImages] = useState({
    img-1: {
        x: 0,
        y: 0,
        rotation: 0
    }
})

const createImg = (newImg) => { setImages({...images, newImg}) }

const updateImg = (id, updatedImg) => {
    setImages({ ...images, [`img-${id}`]{...updatedImg} }
)}

是否有更干净/更易读的方法，或者我是否只需要将所有内容都嵌套在一个对象中？

我有一个应该监听多个按键事件的组件。

 const [activeKeys, setActiveKeys] = useState([]);

  const onKeyDown = e => {
    if (!activeKeys.includes(e.key)) {
      console.log("keydown", e.key);
      setActiveKeys([...activeKeys, e.key]);
    }
  };
  const onKeyUp = e => {
    console.log("keyup", e.key);
    setActiveKeys([...activeKeys].filter(i => i !== e.key));
  };

  useEffect(() => {
    document.addEventListener("keydown", onKeyDown);
    document.addEventListener("keyup", onKeyUp);

    return () => {
      document.removeEventListener("keydown", onKeyDown);
      document.removeEventListener("keyup", onKeyUp);
    };
  });

是核心。完整代码可以在这里找到（codesandbox）

90% 的情况下它都可以正常工作，但是：

当同时释放 2 个键时，状态不会更新两次。

（您可以尝试在上面提供的代码和框中重现它，同时按任意 2 个键，然后同时释放它们。可能需要几次尝试才能解决问题，这是发生问题的 gif，这就是它的外观就像（数字是按下的键的数量，“s”是应该按下的键，但是，您可以在控制台日志中看到“s”的按键已注册。）

以前有人遇到过类似的事情吗？据我所知，问题不在于

• 事件监听器（console.log 被触发）

• 重新渲染（您可以尝试按其他一些键，该键将保留在数组中）

这就是为什么我假设问题出在钩子上，但是我无法解释为什么会发生这种情况。

之间

<button onClick={...}>Click me</button>

和

<span onClick={...}>
  <button>Click me</button>
</span>

对于用户来说有什么区别吗？我知道点击事件总是会冒泡到span元素，但是是否会出现任何可访问性问题或由此产生的意外后果？

我今天发现这个来检查某些东西是否是布尔值：

代替：

typeof a === 'boolean' && //do sth

您可以使用：

a === !!a && //do sth

还有其他类似的方法来检查typeof string/number/obj/arr等吗？

我不是在寻找最佳实践，而是在寻找进行“类型检查”的巧妙方法。