我刚接触使用带有React的ES6类,之前我已经将我的方法绑定到当前对象(在第一个示例中显示),但ES6是否允许我使用箭头将类函数永久绑定到类实例？(当作为回调函数传递时很有用.)当我尝试使用它时,我遇到错误,就像使用CoffeeScript一样:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
因此,如果我要传递SomeClass.handleInputChange给setTimeout它,那么它将被限定为类实例,而不是window对象.
我们应该避免在render内部绑定方法,因为在重新渲染期间它将创建新方法而不是使用旧方法,这将影响性能.
所以对于这样的场景:
<input onChange = { this._handleChange.bind(this) } ...../>
我们可以_handleChange在构造函数中绑定方法:
this._handleChange = this._handleChange.bind(this);
或者我们可以使用属性初始化器语法:
_handleChange = () => {....}
现在让我们考虑一下我们想要传递一些额外参数的情况,让我们说在一个简单的待办事项应用中,点击项目我需要从数组中删除项目,因为我需要传递每个项目索引或待办事项名称onClick方法:
todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)
现在假设todo名称是唯一的.
根据DOC:
此语法的问题是每次组件呈现时都会创建不同的回调.
题:
如何在render方法中避免这种绑定方式或者这有什么替代方法？
请提供任何参考或示例,谢谢.
我了解this绑定的一般理论（重要的函数调用站点，隐式，显式绑定等）以及解决React中此绑定问题的方法，因此它始终指向我想要this成为的对象（绑定构造函数，箭头函数等），但我正在努力获取内部机制。
看一下这两段代码：
class demo extends React.component {
goToStore(event) {
console.log(this)
}
render() {
<button onClick={(e) => this.goToStore(e)}>test</button>
}
}
与
class demo extends React.component {
goToStore(event) {
console.log(this)
}
render() {
<button onClick={this.goToStore}>test</button>
}
}
我所知道的是：
this该render()方法内部自动（通过React）绑定到组件实例this将方法解析为undefined据我了解，从理论上讲，在第一版中会发生以下情况：
this，它就会this从环境中拾取（在本例中是从render()）goToStore方法，即常规函数。object.function()）的规则，所以object它将成为上下文对象，并且在此类函数调用中，它将用作thisgoToStore方法内部，按词法拾取该对象（用作上下文对象）将正确解析为组件实例我觉得这里不是3.和4.，因为那样就适用于2.情况：
<button onClick={this.goToStore}>test</button>
还带有this上下文对象。
在这种特定情况下，逐步发生了什么？
在我觉得做手动功能/对象绑定后,我开始使用箭头功能,并且范围相关的问题令人头疼,但我非常认真地了解使用正常功能(ES5)比使用箭头功能(ES6)更好.
我对这些功能的理解
React中的正常函数:
- 手动绑定对象/函数以便在函数内部使用状态或道具并避免与范围相关的问题
- 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定
- 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数
- 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数
- 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的
React中的箭头功能:
- 无需在构造函数中绑定对象/函数也不需要渲染
- 你不需要依赖当前对象的局部变量interms,即,让那=这个;
- 您不会有范围问题,并且会自动进行对象/功能绑定
但我的查询是,我听说它建议使用正常的功能,并将其绑定在构造函数,而不是使用箭头功能,因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间.
这是真的？推荐哪个？
这个线程接受了答案在React中正确使用箭头函数说 - >这取决于你在哪里使用箭头功能.如果在render方法中使用了Arrow函数,那么每次调用render时它们都会创建一个新实例,就像bind的工作方式一样.
对不起,如果你觉得这是一个戏剧性的问题,但这是我最大的疑问.请建议
在官方反应教程中，他们首先编写类组件：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后使它成为一个功能组件
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
为什么 onClick 更改是必要的，即为什么我们删除了箭头功能？
在第一种情况下，当我们移除箭头函数时，即只保留 this.props.onClick() 事件在每次渲染方块时都会发生，甚至无需单击按钮，为什么会这样？ps：我是 react js 的新手，在学习本教程时遇到了这些疑问，如果您能给出详细的答案和任何可以提供帮助的其他资源，那就太好了！！提前致谢。