javascript - React 无状态组件中的事件处理程序

Question

试图找出在 React 无状态组件中创建事件处理程序的最佳方法。我可以这样做:

const myComponent = (props) => {
    const myHandler = (e) => props.dispatch(something());
    return (
        <button onClick={myHandler}>Click Me</button>
    );
}

这里的缺点是每次渲染这个组件时，都会创建一个新的“myHandler”函数。有没有更好的方法在仍然可以访问组件属性的无状态组件中创建事件处理程序？

Answer 1

将处理程序应用于功能组件中的元素通常应该如下所示:

const f = props => <button onClick={props.onClick}></button>

如果您需要做任何更复杂的事情，这表明要么 a) 组件不应该是无状态的(使用类或 Hook )，要么 b) 您应该在外部有状态容器组件中创建处理程序.

顺便说一句，稍微削弱我的第一点，除非组件位于应用程序的特别密集的重新渲染部分，否则无需担心在 render() 中创建箭头函数。