相关疑难解决方法(0)

我正在尝试throttle在功能组件中使用lodash中的方法，例如：

const App = () => {
  const [value, setValue] = useState(0)
  useEffect(throttle(() => console.log(value), 1000), [value])
  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

由于内部方法useEffect在每次渲染时都会重新声明，因此限制效果不起作用。

有没有人有一个简单的解决方案？

随着反应钩现已我应该在功能部件的情况下，包裹用的道具通过各项功能useCallback并与其他所有的道具价值useMemo？

还应该在我的组件中具有依赖于任何props值的自定义函数，我应该使用useCallback包装它吗？

有哪些好的做法来决定使用此钩子从组件中包装哪些prop或const值？

如果这样可以提高性能，为什么不一直这样做呢？

让我们考虑在包装点击处理程序并添加自定义逻辑的自定义按钮

function ExampleCustomButton({ onClick }) {
  const handleClick = useCallback(
    (event) => {
      if (typeof onClick === 'function') {
        onClick(event);
      }

      // do custom stuff

    },
    [onClick]
  );

  return <Button onClick={handleClick} />;
}

让我们考虑在包装点击处理程序并根据条件添加自定义逻辑的自定义按钮

function ExampleCustomButton({ someBool }) {
  const handleClick = useCallback(
    (event) => {
      if (someBool) {
        // do custom stuff
      }
    },
    [someBool]
  );

  return <Button onClick={handleClick} />;
}

在这两种情况下，我应该用useCallback包装我的处理程序吗？

与使用备忘录类似的情况。

function ExampleCustomButton({ someBool }) …