Javascript 为什么不应该'；JSX道具使用箭头函数还是绑定？

我正在使用React应用程序运行lint，收到以下错误：

error    JSX props should not use arrow functions        react/jsx-no-bind

这就是我运行箭头函数的地方（在

onClick

中）：

{this.state.photos.map（tile=>(
选择此选项。选择图片（平铺）}
样式={{position:'absolute'，zIndex:99，padding:5，backgroundColor:'rgba（255，255，255，0.72）}
/>
}
>
))}

---

这是一种应该避免的坏习惯吗？最好的方法是什么？

为什么不应该在JSX道具中使用内联箭头函数

在JSX中使用箭头函数或绑定是一种不好的做法，会影响性能，因为在每次渲染时都会重新创建该函数

无论何时创建函数，都会对上一个函数进行垃圾收集。重新渲染许多元素可能会在动画中创建jank

使用内联箭头函数将导致

PureComponent

s，并且在

shouldComponentUpdate

方法中使用

shallowCompare

的组件仍应重新加载。由于每次都会重新创建箭头功能道具，因此浅比较会将其标识为对道具的更改，组件将重新加载

正如您在以下两个示例中所看到的，当我们使用内联箭头函数时，

组件每次都会重新呈现（控制台显示“呈现按钮”文本）

示例1-不带内联处理程序的PureComponent

class按钮扩展了React.PureComponent{
render（）{
const{onClick}=this.props；
console.log（“渲染按钮”）；
返回(
点击
);
}
}
类父类扩展了React.Component{
状态={
柜台:0
}
onClick=（）=>this.setState（（prevState）=>({
计数器：prevState.counter+1
}));
render（）{
const{counter}=this.state；
返回(
{计数器}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
这是因为如果在JSX属性中使用，箭头函数显然会在每个渲染上创建函数的新实例。这可能会对垃圾收集器造成巨大的压力，也会阻碍浏览器优化任何“热路径”，因为函数将被丢弃而不是重用

您可以在
上看到完整的解释和更多信息。为了避免使用相同的参数创建新函数，您可以记忆函数绑定结果，下面是一个名为

memobind的简单实用程序：使用像这样的内联函数非常好。皮棉规则已经过时了

这条规则来自一个箭头函数不常见的时代，人们使用.bind（This），它过去很慢。性能问题已在Chrome 49中修复

请注意不要将内联函数作为道具传递给子组件

React Router的作者Ryan Florence写了一篇关于这一点的伟大文章：

---

您可以使用库使用箭头函数，无需担心重新渲染性能：

注意：它通过指定的键在内部缓存箭头函数， 无需担心重新渲染

render（）{
返回(
{this.props.photos.map（（照片）=>(
{
console.log（url）；
})}
/>
))}
);
}

其他功能：

• 命名处理程序
• 通过箭头函数处理事件
• 对键、自定义参数和原始事件的访问
• 组件渲染性能
• 处理程序的自定义上下文

为什么JSX道具不能使用箭头函数或绑定？ 主要是因为内联函数会破坏优化组件的记忆：

传统上，React中内联函数的性能问题与如何在子组件中的每次渲染中断时传递新回调有关。（）

这与额外的函数创建成本无关：

函数.prototype.bind

和arrow函数的性能问题要么是原生的，要么是由babel转换成普通函数；在这两种情况下，我们都可以假设它并不慢。（）

我相信那些声称函数创建是昂贵的人总是被误导（React团队从未说过这一点）。（）

react/jsx no bind

规则什么时候有用？ 您希望确保已记忆的组件按预期工作：

• React.memo

  （用于功能组件）

• PureComponent

  或自定义

  shouldComponentUpdate

  （用于类组件）

通过遵守此规则，可以传递稳定的函数对象引用。因此，当以前的道具没有改变时，上述组件可以通过防止重新渲染来优化性能

如何解决ESLint错误？ 类：将处理程序定义为方法，或用于此绑定。
挂钩：使用

中间地带 在许多情况下，内联函数使用起来非常方便，在性能要求方面也非常好。不幸的是，此规则不能仅限于已记忆的组件类型。如果您仍然希望全面使用它，例如，对于简单的DOM节点，您可以：

rules: {
  "react/jsx-no-bind": [ "error", { ignoreDOMComponents: true } ],
}

const Comp = () => <span onClick={() => console.log("Hello!")} />; // no warning

规则：{
“react/jsx no bind”：[“error”，{ignoreDOMComponents:true}]，
}
const Comp=（）=>console.log（“Hello！”）}/>；//没有警告

如何在无状态组件上实现这一点？无状态（功能）组件没有此，因此无需绑定。通常，这些方法是由包装器智能组件提供的。@OriDrori：当您需要在回调中传递数据时，它是如何工作的

onClick={（）=>{onTodoClick（todo.id）}

@adam beck-将其添加到c

render() {
    return (
        <div>
            {this.props.photos.map((photo) => (
                <Photo
                    key={photo.url}
                    onClick={this.handler(photo.url, (url) => {
                        console.log(url);
                    })}
                />
            ))}
        </div>
    );
}

rules: {
  "react/jsx-no-bind": [ "error", { ignoreDOMComponents: true } ],
}

const Comp = () => <span onClick={() => console.log("Hello!")} />; // no warning