我正在遵循一个教程来更新ReactJS中的状态。我在本教程中碰到了这一行,但this.updateLanguage = this.updateLanguage.bind(this)我不知道发生了什么。我了解此基本知识并进行绑定,但我从未见过如此做过。有人可以解释一下吗?完整代码:
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;
诸如click事件之类的DOM回调会将this上下文设置为DOM元素本身,在本例中为li。尝试删除您不了解的部分,然后看看会发生什么- 您会看到类似的内容this.setState is not defined,因为该功能未在li元素的上下文中定义(基本上是在寻找li.setState)。
click
this
li
this.setState is not defined
li.setState
什么bind是在该行做的是确保每当函数被调用,它会被称为与this我们想要的背景下,在这种情况下,Popular组件- 例如Popular.setState。
bind
Popular
Popular.setState
如今,越来越多的人看到人们仅使用fat arrow语法作为保存this上下文的简写-例如,在这种情况下onClick={ () => this.updateLanguage(lang) }。
fat arrow
onClick={ () => this.updateLanguage(lang) }
(对于那些关心性能的人请注意:粗箭头方法更干净一些,但有争议,因为它在每个渲染器上反复声明该功能。也就是说,有些人声称对性能的影响很小或没有。)