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

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 函数都使用 class 的 this 对象，这超出了它们的范围（对吧？） .

那么为什么我只需要将它绑定到handleClick？

Answer 1

Javascript 在调用时分配范围，而不是在定义时分配范围。您需要 bind() 您的 handleClick() 方法到 class，这样当从模板调用它时，它仍然可以通过 this 访问 class' 范围。

React 模板被编译成 javascript 函数，所以如果你没有 bind() 你的 onClick={this.handleClick} 处理程序将被限定在调用它的模板函数中。在您的例子中，它指的是被点击的按钮。

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

Answer 2

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

现在由于范围是在调用时决定的，因此 call/bind 这些方法与适当的 scope.So 反应是我们的工作 scope.So 我们不需要理会这些函数。

但是上面例子中的handleClick等其他函数是我们自己制作的方法，react对此一无所知。此方法的调用也是由我们定义的（即单击按钮时）。所以我们的工作是 call/bind 这个方法在正确的范围内。

这就是为什么我们在上面的例子中只绑定 handleClick 而没有绑定 render 函数。

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

Why one function requires binding and the other doesn't?

javascript

jsx

reactjs