Question

我试图学习如何做出反应，却偶然发现了YouTube上的这个很棒的视频。在这里，他做了这样的事情。

首先，我们创建了一个createElement函数react

function createElement (el, props, ...children ) {
    return div(el,props,children)
}

   function div (el, props, children) {
        // checking if element is class 
            if (isClass(el)) {
                return HandleClass(el, props)
       // more code but skipping adding it since it is irrelevant

function HandleClass (classComponent, props) {
    const component = new classComponent(props)
    return component.render()
} 

window.React = {
    createElement
}

还有看起来像这样的React Class组件

class Hello extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0
        }
    }

    onPlusClick () {
        this.setState({value: this.state.value + 1})
    }

    onMinusClick () {
        this.setState({value: this.state.value - 1})
    }


    render () {
        return React.createElement('div', null, 
        React.createElement('h1', null, 'This is famour foo counter app'),
        React.createElement('h1', null, `Counter Value: ${this.state.value}`),
        React.createElement('button', {onClick: this.onPlusClick.bind(this)}, '+'), //TODO: What does .bind here mean
        React.createElement('button', {onClick: this.onMinusClick.bind(this)}, '-')  //TODO: What does .bind here mean
        )
    }
}

现在，在这里我不理解onClick: this.onMinusClick.bind(this)（在上一课中）。有人可以给我解释一下吗？在我的个人React项目中，我不必使用bind来添加点击事件

谢谢

Answer 1

react docs中对此进行了很好的解释。从文档中：

您必须小心JSX回调中的含义。在JavaScript中，默认情况下不绑定类方法。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时将无法定义。

这不是特定于React的行为；它是函数在JavaScript中如何工作的一部分。通常，如果您引用的方法后面没有（），例如onClick = {this.handleClick}，则应绑定该方法。

换句话说，作为类方法编写的任何函数都不知道在该函数中使用this的含义。因此，使用您的类方法onPlusClick，您可以要求它this.setState({ ... ])。但是在该方法内部，它并不固有地知道this指的是什么。您必须告诉您要在类方法中使用this来引用您当前所在的类组件。因此，需要bind语句。

如果使用箭头功能，则可能永远不需要使用bind。箭头函数保留this 的上下文，这意味着当您在箭头函数中使用单词this时，它会自动假定this的含义与这是在编写箭头功能的地方。

希望能为您清除它。

Answer 2

react中的每个函数都必须绑定，否则它将无法正常工作。否则，当您调用它时会给出一个错误您也可以这样做：

class Hello extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        value: 0
    }
this.onPlusClick = this.onPlusClick.bind(this);
this.onMinusClick= this.onMinusClick.bind(this);
}

onPlusClick () {
    this.setState({value: this.state.value + 1})
}

onMinusClick () {
    this.setState({value: this.state.value - 1})
}


render () {
    return React.createElement('div', null, 
    React.createElement('h1', null, 'This is famour foo counter app'),
    React.createElement('h1', null, `Counter Value: ${this.state.value}`),
    React.createElement('button', {onClick: this.onPlusClick}, '+'), //TODO: What does .bind here mean
    React.createElement('button', {onClick: this.onMinusClick}, '-')  //TODO: What does .bind here mean
    )
}

}

.bind在课堂方法

2 个答案: