在React函数组件中创建事件处理程序的正确方法是什么

Question

我目前正在学习react.js，我只想问一个问题，如何在函数组件中正确创建事件处理程序函数。

请原谅，因为官方文档中的大多数示例都将class用于此类组件。

下面的示例代码似乎运行良好，但我不确定在函数组件内创建事件处理程序时，这是否是正确的方式/最佳实践，因为每次状态更改时，我都假设handleClick函数也会重新创建，不是吗？这会影响我们每次重新渲染时的性能，对吗？

例如，当我在return语句中添加更多也可以触发事件的元素，并且每个事件都有一个相应的事件处理程序，该事件处理程序也在同一个函数组件中声明时，对于那些极端情况来说，这可能是一个开销，不是吗？

据我所知，这对类组件来说不是问题，因为它们有一个单独的render()方法，因此不会重新创建事件处理程序函数，我们如何在函数组件

function Toggle (props) {
const [isToggleOn, setToggle] = React.useState(false)
function handleClick (e) {
setToggle(() => !isToggleOn)
}
return (
<button onClick={handleClick}>
{isToggleOn ? 'ON' : 'OFF'}
</button>
)
}

Answer 1

如果不希望在每次渲染时重新创建handleClick函数，则应使用useCallback钩子。

const handleClick = useCallback(() => {
setToggle((previousState) => !previousState)
}, [])

这样，handleClick仅在初始渲染时创建，因为useCallback的依赖数组为空。

您可能还注意到，我删除了isToggleOn的用法，而是在setToggle中使用以前的状态，因此您的函数不需要依赖于isToggleOn。