回調(diào)函數(shù)中的 this蔫劣，類的方法默認(rèn)是不會(huì)綁定 this 的。如果忘記綁定 this.handleClick 并把它傳入 onClick, 當(dāng)調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值會(huì)是 undefined。
這并不是 React 的特殊行為俏站；它是函數(shù)如何在 JavaScript 中運(yùn)行的一部分蚯窥。通常情況下，如果沒有在方法后面添加 () 童谒，例如 onClick={this.handleClick}单旁，應(yīng)該為這個(gè)方法綁定 this。
使用 bind 有兩種方式可以解決饥伊。如果正在使用實(shí)驗(yàn)性的屬性初始化器語法象浑，可以使用屬性初始化器來正確的綁定回調(diào)函數(shù)：
class LoggingButton extends React.Component {
? // 這個(gè)語法確保了 `this` 綁定在? handleClick 中
? // 這里只是一個(gè)測(cè)試
? handleClick = () => {
? ? console.log('this is:', this);
? }
? render() {
? ? return (
? ? ? <button onClick={this.handleClick}>
? ? ? ? Click me
? ? ? </button>
? ? );
? }
}
如果沒有使用屬性初始化器語法，可以在回調(diào)函數(shù)中使用 箭頭函數(shù)：
class LoggingButton extends React.Component {
? handleClick() {
? ? console.log('this is:', this);
? }
? render() {
? ? //? 這個(gè)語法確保了 `this` 綁定在? handleClick 中
? ? return (
? ? ? <button onClick={(e) => this.handleClick(e)}>
? ? ? ? Click me
? ? ? </button>
? ? );
? }
}
使用這個(gè)語法有個(gè)問題就是每次 LoggingButton 渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)琅豆。在大多數(shù)情況下愉豺，這沒有問題。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件茫因，這些組件可能會(huì)進(jìn)行額外的重新渲染蚪拦。通常建議在構(gòu)造函數(shù)中綁定或使用屬性初始化器語法來避免這類性能問題。
