试图找出在 React 无状态组件中创建事件处理程序的最佳方法。我可以做这样的事情：
const myComponent = (props) => {
const myHandler = (e) => props.dispatch(something());
return (
<button onClick={myHandler}>Click Me</button>
);
}
这里的缺点是每次渲染这个组件时，都会创建一个新的“myHandler”函数。有没有更好的方法在无状态组件中创建事件处理程序，这些组件仍然可以访问组件属性？
将处理程序应用于函数组件中的元素通常应该如下所示：
const f = props => <button onClick={props.onClick}></button>
如果您需要做任何更复杂的事情，这表明 a) 组件不应该是无状态的（使用类或钩子），或者 b) 您应该在外部有状态容器组件中创建处理程序。
顺便说一句，稍微破坏我的第一点，除非组件位于应用程序的特别密集的重新渲染部分，否则无需担心在render().
使用新的 React 钩子功能，它可能看起来像这样：
const HelloWorld = ({ dispatch }) => {
const handleClick = useCallback(() => {
dispatch(something())
})
return <button onClick={handleClick} />
}
useCallback 创建一个记忆函数，这意味着不会在每个渲染周期重新生成一个新函数。
https://reactjs.org/docs/hooks-reference.html#usecallback
然而，这仍处于提案阶段。
这种方式怎么样：
const myHandler = (e,props) => props.dispatch(something());
const myComponent = (props) => {
return (
<button onClick={(e) => myHandler(e,props)}>Click Me</button>
);
}
如果处理程序依赖于更改的属性，则每次都必须创建处理程序，因为您缺少可以缓存它的有状态实例。另一种可能有效的替代方法是根据输入props记住处理程序。
几个实现选项 lodash._memoize R.memoize fast-memoize