为什么一个函数需要绑定而另一个不需要？

Question

我刚开始学习React和JavaScript。
在学习本教程时，我得到了一个组件的示例代码，它创建了一个切换按钮：

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }
    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}

在我看来，handleClick函数和render函数都使用类的this对象，这超出了它们的范围（对吧？

那么为什么我只需要将其绑定到handleClick中呢？

Answer 1

Javascript在调用时分配作用域，而不是在定义时分配作用域。您需要将handleClick()方法bind()到类，以便从模板调用它时，它仍可以通过this访问类的作用域。

React 模板被编译成 javascript 函数，所以如果你没有bind()你的onClick={this.handleClick}处理程序的范围将限定为调用它的模板函数。在您的情况下，它将引用单击的按钮。

如果您的事件处理程序从未引用过this则它不需要绑定，但由于您正在调用this.setState()因此必须绑定以使处理程序了解类范围。

Answer 2

在任何 react

类中，像 componentWillMount、componentDidMount、render 等函数在渲染元素时由 react 内部调用，我们从不调用这些方法。

现在，由于作用域是在调用时决定的，因此 react 的工作是用适当的作用域调用/绑定这些方法。所以我们不需要为这些功能而烦恼。

然而，上面示例中的其他函数（如handleClick）是我们制作的方法，反应对此一无所知。此外，此方法的调用由我们定义（即单击按钮时）。因此，我们的工作是使用正确的范围调用/绑定此方法。

这就是为什么在上面的例子中我们只绑定handleClick而不绑定渲染函数。