对使用 React 钩子找到的解决方案的性能的担忧

Question

我想公开我对钩子的担忧。

在使用钩子重构/重写反应库 (react-numpad) 以进行学习时，我一直坚持在关键事件上实现 eventListener。

使用类，只需在 componentDidMount 和 componentWillUnmount 生命周期中添加 addListener 即可完成。

使用KeyPress挂钩

https://github.com/gpietro/react-numpad/blob/issue/8/numpad-visible-by-default/lib/hooks/useKeyPress.js

更新回调

NumPad 组件是具有值状态的父组件

https://github.com/gpietro/react-numpad/blob/issue/8/numpad-visible-by-default/lib/components/NumPad.js#L93

挂钩用法

Keypad 组件是作为 props 接收值并调用的子组件 更新 keydown 作为回调。如果 useEffect（在钩子内）有空数组，则此值不会更新

https://github.com/gpietro/react-numpad/blob/issue/8/numpad-visible-by-default/lib/elements/KeyPad.js#L70

现在在每次渲染时添加和删除 addListener。这以前没有发生，但仅在安装或卸载组件时发生。

钩子的行为是否与使用类的行为相同？

Answer 1

您不需要在每次渲染中添加或删除事件侦听器，并且完全可以像以前一样只添加一次事件侦听器，方法是使用带有空数组的 useEffect 作为第二个参数。比如：

useEffect(() => {
  // your didMount code here
  return () => {
    // your willUnmount code here
 }
}, [])

问题

您这样做的问题是，由于该函数仅运行一次，因此可从中访问的值（例如 props 或其他范围外的变量）不会随着它们的变化而更新。

举个例子：

const [foo, setFoo] = setState(1)
useEffect(() => {
  const id = window.setInterval(() => console.log(foo), 1000)
  return () => window.clearInterval(id)
}, [])
// ...
setFoo(2)

此代码将始终打印 1，即使在调用 setFoo 之后也是如此，因为该函数绑定到 foo 的旧值。

推荐解决方案

当您只需要根据自身和其他值不断更新某些状态时，最好的选择是使用带有 useReducer 的 reducer。您可以从 useEffect 函数（或任何其他地方）使用 dispatch，reducer 将使用更新的状态调用，允许它读取它并根据需要更新它。只需传递有关操作本身的任何新信息。

根据您的使用情况，您只需发送相关的事件信息，并让 reducer 处理更新。

其他选项

反应事件

如果您可以使用标准反应事件而不是任何 addEventListener，您就不必考虑这一点，因为该函数将在每次渲染时更新，而无需您执行任何操作。您可以将函数作为道具传递，以便它们也可以从子组件中使用。

参考

您可以使用 ref 代替，因为它们总是返回相同的对象，改变它而不是创建一个新对象。这使得任何可以访问 ref 的函数都能够读取当前值。

例子：

const fooRef = useRef(1)
fooRef.current = foo
useEffect(() => {
  const id = window.setInterval(() => console.log(fooRef.current), 1000)
  return () => window.clearInterval(id)
}, [])
// ...
fooRef.current = 2

您可以将 ref 用于值，甚至可以将其用于从事件处理程序调用的函数。这不是更干净的路径，但您可以让它发挥作用。