this绑定问题
1.为了在回调函数中使用this,需要在constructor中手动绑定this
class Clock extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>
<h1>Hello, world!</h1>
</div>
);
}
}
2.如果觉得使用 bind
很麻烦,这里有两种方式可以解决。
- class fields 语法
-
class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 handleClick = () => { console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } }
- 箭头函数语法
-
class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 return ( <button onClick={() => this.handleClick()}> Click me </button> ); } }
- 此语法问题在于每次渲染
LoggingButton
时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。
向事件处理程序传递参数
1.通过箭头函数方式
handleClick = (id, e) => {
console.log(id, e);
}
<button onClick={(e) => this.handleClick(id, e)}>点击</button>
2.通过bind方式
handleClick = (id, e) => {
console.log(id, e);
}
<button onClick={this.handleClick.bind(this, id)}>点击</button>
上述两种方式是等价的,分别通过箭头函数和 Function.prototype.bind 来实现。
在这两种情况下,React 的事件对象 e
会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind
的方式,事件对象以及更多的参数将会被隐式的进行传递。
扩展,第三种传参方式:
<button onClick={this.handleClick(id)}></button>
handleClick = (id) => {
return (e) => {
console.log(id, e);
}
}