我现在已经参与了多个React项目,并且在一个项目中注意到每个新方法都没有绑定。实际差异(如果有)是什么?如果可以像第二个示例那样进行绑定,为什么还要绑定呢?
在第一种情况下,代码如下所示:
constructor(props) { super(props); this.state = { myState: false }; this.clickMe = this.clickMe.bind(this); } clickMe() { this.setState({ myState: !this.state.myState }); }
另一个示例如下所示:
constructor(props) { super(props); this.state = { myState: false }; } clickMe = () => { this.setState({ myState: !this.state.myState }); }
在constructure,
constructure
this.clickMe = this.clickMe.bind(this);
使用bind方法,您可以进行显式this绑定以提供clickMe方法的上下文。
bind
this
clickMe
即。在这里反应组件范围
简而言之,您要谨慎决定什么是调用上下文范围(this绑定)。
但是随着
clickMe = () => { this.setState({ myState: !this.state.myState }); }
Arrow function 照顾您在定义它的React Component范围内进行词法范围绑定。无需使用 bind
Arrow function
如果不使用arrow function,without bind,您的函数将不会进入bindReact Component范围。
arrow function