首页 > 代码库 > react列表中,当key改变后发生的事情
react列表中,当key改变后发生的事情
Main.jsx
export default class Main extends PureComponent { constructor(props) { super(props); this.state = { list: [ { key: 0, value: 1 }, { key: 1, value: 2 }, { key: 2, value: 3 } ] } this.setKey = ::this.setKey; } componentWillMount() { console.log(‘main will mount‘); } componentDidMount() { console.log(‘main did mount‘); } componentWillUpdate() { console.log(‘main will update‘); } componentDidUpdate() { console.log(‘main did update‘); } componentWillUnmount() { console.log(‘main will unmount‘); } setKey() { const { list } = this.state; this.setState({ list: Array.from(list, item => { return Object.assign(item, { key: item.key + 1 }); }) }); } render() { const { list } = this.state; return ( <div> {list.map(item => <List key={item.key} value=http://www.mamicode.com/{item.value} />)} <button onClick={this.setKey}>key</button> </div> ) } }
List.jsx
export default class List extends PureComponent { constructor(props) { super(props); } componentWillMount() { console.log(`list${this.props.value} will mount`); } componentDidMount() { console.log(`list${this.props.value} did mount`); } componentWillUpdate() { console.log(`list${this.props.value} will update`); } componentDidUpdate() { console.log(`list${this.props.value} did update`); } componentWillUnmount() { console.log(`list${this.props.value} will unmount`); } render() { const { value } = this.props; return( <div> list{value} </div> ) } }
当点击key按钮后会发生什么呢?先分析一下
react列表中,当key改变后发生的事情
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。