Question

我有一个功能组件：

function MyComponent(props){
    return <button onClick={() => props.onClick(props.count + 1)}> Click me </button>
}

现在，许多在线资源建议不要使用这种方式附加事件监听器（当需要传递一些参数时），因为它需要在每个渲染上创建新函数。对于基于类的组件，他们建议从中提取另一个组件，并将param作为prop传递给该组件。但是我们如何在功能组件中重写这些绑定呢？

一个这样的资源：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Answer 1

总的来说，我不担心这种模式。如果你查看React docs，给出的建议是

可以在渲染方法中使用箭头功能吗？一般来说，是的，没关系，并且它通常是将参数传递给回调函数的最简单方法。如果确实存在性能问题，请进行优化！

因此，如果你没有注意到每个渲染创建一个新函数的问题，那就不用担心了。它很少会被注意到。

如果您发现自己确定需要阻止每个渲染的新函数，我可能只是将其转换为类组件。

Answer 2

如果您只想满足eslint规则，您可以尝试这样的事情

function MyComponent(props){
         const handleClick = props => props.onClick(props.count + 1);  
         return <button onClick={handleClick}> Click me </button>
    }

但您也可以将无状态组件更改为基于类

如何避免功能组件事件处理程序中的bind / lambda？

2 个答案: