javascript - ReactJS 绑定(bind)(这个)

Question

我正在按照教程更新 ReactJS 中的状态。我在教程 this.updateLanguage = this.updateLanguage.bind(this) 中遇到了这一行我不明白发生了什么。我了解这个和绑定(bind)的基础知识，但我以前从未见过它这样做过。有人可以解释一下吗？完整代码:

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) } .

(注意那些关心性能的人:胖箭头方法更干净但有些争议，因为它在每次渲染上反复声明函数。也就是说，有些人声称对性能的影响很小或没有显着影响。)