首页 > 代码库 > React之事件绑定、列表中key的使用
React之事件绑定、列表中key的使用
在学习React的Hadding Events这一章节,发现事件回调函数的几种写法,看似区别不大,但实际差异还是蛮大的。
class Toggle extends React.Component{ constructor(props) { super(props); this.state = {isToggleOn:false}; //necessary this.bindClick = this.bindClick.bind(this);//推荐写法 }; bindClick(){ this.setState( prevState => ({ isToggleOn : !prevState.isToggleOn }) ) }; render() { return ( // <button onClick={(e) => this.bindClick(e)}> //这种写法导致每次呈现组件都要创建一个回调方法,浪费性能 <button onClick={this.bindClick}> {this.state.isToggleOn ? "ON" : "OFF"} </button> ) }; } ReactDOM.render(<Toggle /> ,document.getElementById("example"))
通常使用推荐写法
2、列表中的key
在React中,列表中的key很关键,虽然不是必需的,但是
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
并且如果封装一个列表组件,key最好赋给封装组件,而非原始列表,
key不会作为组件的props传递
如下:key赋给ListItem而非li
function ListItem(props) { const value = props.value; return ( // Wrong! There is no need to specify the key here: <li key={value.toString()}> {value} </li> ); } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Wrong! The key should have been specified here: <ListItem value=http://www.mamicode.com/{number} />"color: #000000"> ); return ( <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById(‘root‘) );
React之事件绑定、列表中key的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。