JS绑定有哪些方面？[重复]

Question

具有以下最简单的组件。

class App extends Component {
  constructor(props) {
    super(props);
    console.log(this);
    this.state = {
      name: "John"
    }
  }

  clickHandler() {
    this.setState({
      name: "Mark"
    })
  };

  render() {
    return (
      <div className="App">
        {this.state.name}
        <button onClick={this.clickHandler.bind(this)}></button>
      </div>
    )
  };
}

export default App;

如果我写的话

<button onClick={this.clickHandler}></button>

上面说这个在

this.setState({
      name: "Mark"
    })

是未定义的。那一行

<button onClick={console.log(this)}></button>

显示这是App。那么如果这是App为什么clickHandler不自动绑定到点之前的那个对象呢？

<button onClick={this.clickHandler}></button>

据我所知，在“context.function”中，上下文应该绑定到函数。或者它只适用于“context.function（）”？

Answer 1

或者它只适用于“context.function（）”？

完全正确。这取决于调用函数的位置。

正在做

<button onClick={this.clickHandler}></button>

将单击处理程序作为参数传递。React 的内部结构与以下方面并无完全不同：

function button({ onClick }) {
  // ...
  theActualDOMButtonElement.addEventListener('click', onClick);
}

或

function button({ onClick }) {
  // ...
  theActualDOMButtonElement.addEventListener('click', (e) => {
    const reactCreatedSyntheticEvent = retrieveSyntheticEvent(e);
    onClick(reactCreatedSyntheticEvent);
  });
}

您正在传递＜code＞这个。clickHandler作为参数，而不是立即调用它-因为它是在以后调用的，并且它的调用方式决定了＜code＞this，如果不确保＜code＞this＜/code＞是正确的，例如通过内联调用函数、使用类字段或使用函数组件，就不能只执行＜code＞＝｛this.ClickHandlder｝＜/code＞操作。