ReactJS绑定（this）

Question

我正在遵循一个教程来更新ReactJS中的状态。我在本教程中碰到了这一行，但this.updateLanguage = this.updateLanguage.bind(this)我不知道发生了什么。我了解此基本知识并进行绑定，但我从未见过如此做过。有人可以解释一下吗？完整代码：

var React = require('react');

class Popular extends React.Component {
    // constructor to set default state
    constructor (props) {
        super(props);
        this.state = {
            selectLanguage: 'All'
        };
        // I don't understand this line
        this.updateLanguage = this.updateLanguage.bind(this);
    }
    // updates state
    updateLanguage(lang) {
        this.setState(() => {
            return {
                selectLanguage: lang
            }
        });
    }
    render() {
        var languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python'];
        return (
            <ul className='languages'>
                {languages.map((lang) => {
                    return (
                        // adds listener to current state
                        <li style={lang === this.state.selectLanguage ? {color: '#d0021b'}: null}
                            onClick={this.updateLanguage.bind(null, lang)} 
                            key={lang}>
                            {lang}
                        </li>
                    )
                })}
            </ul>
        )
    }
}

module.exports = Popular;

Answer 1

诸如click事件之类的DOM回调会将this上下文设置为DOM元素本身，在本例中为li。尝试删除您不了解的部分，然后看看会发生什么-
您会看到类似的内容this.setState is not defined，因为该功能未在li元素的上下文中定义（基本上是在寻找li.setState）。

什么bind是在该行做的是确保每当函数被调用，它会被称为与this我们想要的背景下，在这种情况下，Popular组件-
例如Popular.setState。

如今，越来越多的人看到人们仅使用fat arrow语法作为保存this上下文的简写-例如，在这种情况下onClick={ () => this.updateLanguage(lang) }。

（对于那些关心性能的人请注意：粗箭头方法更干净一些，但有争议，因为它在每个渲染器上反复声明该功能。也就是说，有些人声称对性能的影响很小或没有。）