目錄

• 1.為什么父組件給子組件傳遞函數(shù)時(shí)，必須綁定 this？
• a.為什么在子組件中調(diào)用回調(diào)函數(shù)時(shí)，this 的默認(rèn)值會(huì)是 undefined
• 2.react 中的組件四種綁定 this 方法
• 3.箭頭函數(shù)+回調(diào) 在定義時(shí)就綁定this

1.為什么父組件給子組件傳遞函數(shù)時(shí)，必須綁定 this？

當(dāng)父組件將一個(gè)方法作為回調(diào)函數(shù)傳遞給子組件時(shí)，需要綁定 this 是因?yàn)楹瘮?shù)的 this 值在 JavaScript 中是在調(diào)用時(shí)確定的，而不是在聲明時(shí)確定的。在子組件中調(diào)用這個(gè)回調(diào)函數(shù)時(shí)，this 的默認(rèn)值會(huì)是 undefined（在嚴(yán)格模式下）或全局對(duì)象（在非嚴(yán)格模式下），而不是父組件的實(shí)例。這通常會(huì)導(dǎo)致意外的行為和錯(cuò)誤。

為了確保回調(diào)函數(shù)在子組件中執(zhí)行時(shí)，其 this 值仍然指向父組件的實(shí)例，我們需要使用 bind 方法將 this 明確綁定到父組件實(shí)例。這樣，無(wú)論回調(diào)函數(shù)在哪里被調(diào)用，其 this 值始終保持一致。

以下是一個(gè)簡(jiǎn)單的例子：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "Hello",
    };
    this.handleClick = this.handleClick.bind(this); // 綁定 this
  }

  handleClick() {
    console.log(this.state.value); // 輸出 "Hello"
  }

  render() {
    return <Child onClick={this.handleClick} />;
  }
}

class Child extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>Click me</button>;
  }
}

在這個(gè)例子中，我們?cè)?Parent 組件的構(gòu)造函數(shù)中使用 bind 方法將 this.handleClick 的 this 值綁定到 Parent 組件實(shí)例。這樣，無(wú)論 handleClick 在哪里被調(diào)用，其 this 值始終指向 Parent 組件實(shí)例。因此，當(dāng)在子組件中點(diǎn)擊按鈕時(shí)，handleClick 函數(shù)能夠正確地訪問(wèn) Parent 組件的 state。

如果您不想在構(gòu)造函數(shù)中使用 bind，還可以使用箭頭函數(shù)來(lái)自動(dòng)綁定 this：

class Parent extends React.Component {
  state = {
    value: "Hello",
  };

  handleClick = () => {
    console.log(this.state.value); // 輸出 "Hello"
  };

  render() {
    return <Child onClick={this.handleClick} />;
  }
}

在這個(gè)例子中，我們使用了類屬性（Class Field）語(yǔ)法并將 handleClick 定義為箭頭函數(shù)。箭頭函數(shù)會(huì)自動(dòng)綁定其定義時(shí)的上下文，所以不再需要手動(dòng)綁定 this。

a.為什么在子組件中調(diào)用回調(diào)函數(shù)時(shí)，this 的默認(rèn)值會(huì)是 undefined

首先，我們需要了解 JavaScript 函數(shù)中的 this 是如何工作的。在 JavaScript 中，函數(shù)的 this 值取決于函數(shù)是如何被調(diào)用的。這里有幾種情況：

• 當(dāng)作為對(duì)象的方法調(diào)用時(shí)，this 指向該對(duì)象。

const obj = {
  value: "Hello",
  method() {
    console.log(this.value);
  },
};

obj.method(); // 輸出 "Hello"，此時(shí) this 指向 obj

• 當(dāng)作為一個(gè)普通函數(shù)調(diào)用時(shí)，this 指向全局對(duì)象（非嚴(yán)格模式下）或 undefined（嚴(yán)格模式下）。

function example() {
  console.log(this);
}

example(); // 非嚴(yán)格模式下輸出全局對(duì)象，嚴(yán)格模式下輸出 undefined

• 當(dāng)使用箭頭函數(shù)時(shí)，this 會(huì)捕獲定義時(shí)的上下文。

const obj = {
  value: "Hello",
  method: () => {
    console.log(this.value);
  },
};

obj.method(); // 輸出 undefined，因?yàn)榧^函數(shù)捕獲了全局上下文

現(xiàn)在我們回到 React 的子組件中調(diào)用父組件傳遞的回調(diào)函數(shù)的問(wèn)題。當(dāng)在子組件中調(diào)用回調(diào)函數(shù)時(shí)，它實(shí)際上是在一個(gè)事件處理程序（如 onClick）中作為普通函數(shù)調(diào)用的。這意味著它不會(huì)綁定到子組件實(shí)例，而是綁定到全局對(duì)象（非嚴(yán)格模式下）或 undefined（嚴(yán)格模式下）。

要解決這個(gè)問(wèn)題，我們需要確保回調(diào)函數(shù)中的 this 在調(diào)用時(shí)始終指向父組件實(shí)例。這就是為什么我們需要在父組件中使用 bind 方法或箭頭函數(shù)來(lái)綁定 this 的原因。通過(guò)這樣做，我們可以確保回調(diào)函數(shù)在子組件中調(diào)用時(shí)，其 this 值始終指向父組件實(shí)例。

2.react 中的組件四種綁定 this 方法

使用箭頭函數(shù)可以在定義的時(shí)候就綁定事件 。

而不再是調(diào)用時(shí)決定this指向。

在 React 中，有四種常見(jiàn)的方法來(lái)綁定組件方法中的 this：

• 構(gòu)造函數(shù)中綁定：在組件的構(gòu)造函數(shù)中顯式地為方法綁定 this。這是比較傳統(tǒng)的方式。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ... };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // ...
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

• 箭頭函數(shù)作為類屬性：使用類屬性（class properties）語(yǔ)法，將組件方法定義為箭頭函數(shù)。這樣，this 會(huì)自動(dòng)綁定到當(dāng)前組件實(shí)例。

class MyComponent extends React.Component {
  state = { ... };

  handleClick = () => {
    // ...
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

• 箭頭函數(shù)作為回調(diào)：在 JSX 中直接使用箭頭函數(shù)，這樣也可以保證 this 被正確綁定。但請(qǐng)注意，每次組件渲染時(shí)，都會(huì)創(chuàng)建一個(gè)新的箭頭函數(shù)，可能會(huì)導(dǎo)致性能問(wèn)題。

class MyComponent extends React.Component {
  state = { ... };

  handleClick() {
    // ...
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

• 使用 Function.prototype.bind() 方法作為回調(diào)：在 JSX 中直接使用 Function.prototype.bind() 方法來(lái)為回調(diào)函數(shù)綁定 this。同樣，這種方式也會(huì)在每次渲染時(shí)創(chuàng)建一個(gè)新的函數(shù)，可能會(huì)導(dǎo)致性能問(wèn)題。

class MyComponent extends React.Component {
  state = { ... };

  handleClick() {
    // ...
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>Click me</button>;
  }
}

推薦使用構(gòu)造函數(shù)綁定或箭頭函數(shù)作為類屬性的方法，因?yàn)樗鼈冊(cè)诮M件實(shí)例創(chuàng)建時(shí)只綁定一次，不會(huì)在每次渲染時(shí)創(chuàng)建新的函數(shù)。

3.箭頭函數(shù)+回調(diào) 在定義時(shí)就綁定this

這里使用箭頭函數(shù)作為回調(diào)函數(shù)的原因是為了確保setCount函數(shù)在點(diǎn)擊按鈕時(shí)正確地執(zhí)行。箭頭函數(shù)可以自動(dòng)綁定this，使得this值在定義時(shí)就已經(jīng)確定。

如果你直接寫成這樣：

<button onClick={setCount(count + 1)}>Increment</button>

這會(huì)導(dǎo)致一個(gè)問(wèn)題：在組件渲染時(shí)，setCount(count + 1)就會(huì)被立即執(zhí)行，而不是等到用戶點(diǎn)擊按鈕時(shí)。這樣一來(lái)，按鈕點(diǎn)擊事件就沒(méi)有意義了，而且還可能導(dǎo)致無(wú)限循環(huán)的渲染。

而使用箭頭函數(shù)作為回調(diào)：

<button onClick={() => setCount(count + 1)}>Increment</button>

這樣，當(dāng)用戶點(diǎn)擊按鈕時(shí)，箭頭函數(shù)會(huì)被執(zhí)行，而setCount會(huì)在箭頭函數(shù)內(nèi)部被調(diào)用，實(shí)現(xiàn)了正確的點(diǎn)擊事件處理。

總之，使用箭頭函數(shù)可以確保setCount在點(diǎn)擊事件觸發(fā)時(shí)被調(diào)用，而不是在組件渲染時(shí)就執(zhí)行。

以上就是在React中this容易遇到的問(wèn)題詳解的詳細(xì)內(nèi)容，更多關(guān)于React his的資料請(qǐng)關(guān)注其它相關(guān)文章！