我对我一直在阅读的一个主题有疑问,但在一个方面仍然感到困惑。
到目前为止,我一直坚持使用jsx-no-bind
的ESlint规则来防止浅层属性渲染和性能问题。
问题在于render方法中的箭头功能将在每个渲染上重新创建。
但是,如果在功能组件中,在返回之外声明arrow函数,我会假设不会在每个渲染器上都重新创建它,而是每次都指向同一函数。但是ESlint规则jsx-no-bind
会警告我,我不应该这样做。
这是我通常如何使用Class组件执行此操作的示例
class Click extends React.Component {
handleClick = (event) => {
const { onClick, id } = this.props
onClick(id)
}
render () {
return (
<button onClick={this.handleClick}>
)
}
}
关于我如何看待功能组件的情况
const Click = ({ onClick, id }) => {
const handleClick = () => {
onClick(id)
}
return <button onClick={handleClick} />
}
对于最后一个,ESlint会警告我不要在JSX中使用箭头功能,但这是一个问题吗?我的假设是它与类函数相同,因为该函数不会在每个渲染器上重新创建。