ReactJS 绑定（这个）

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

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

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

如今，人们越来越普遍地看到人们只是使用fat arrow语法作为速记来保留this上下文——例如在这种情况下onClick={ () => this.updateLanguage(lang) }。

（请注意那些关心性能的人：粗箭头方法更简洁但有些争议，因为它在每次渲染时反复声明函数。也就是说，有些人声称对性能影响很小或没有显着影响。）