如何使用 React.usecallback？

Question

我有一个如下所示的 function，可以在使用 React 和 typescript 单击按钮时调用。

function Parent () {
    const [isOpen, setIsOpen] = React.useState(false);
    const handleClick = () => {
        setIsOpen(open => !open);
    }
    return (
        <button onClick={handleClick}>click me </button> 
    );

}

如何使用React.usecallback方法重写handleClick方法？

有人可以帮我解决这个问题吗？ 谢谢。

Answer 1

我们只是包装函数并将我们的isOpen添加到因变量列表中，因为它会在每次点击时发生变化。

const handleClick = React.useCallback(() => {
  setIsOpen(open => !open);
}, [isOpen]);