11-setState不可变力量

最新推荐文章于 2024-04-27 23:15:17 发布

sunnyboysix

最新推荐文章于 2024-04-27 23:15:17 发布

阅读量79

点赞数

分类专栏： react官网学习文章标签： react.js

本文链接：https://blog.csdn.net/sunnyboysix/article/details/127380210

版权

react官网学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

setState不可变力量

不要直接改变state里面数组如果做数组的修改最好直接创建一个新的数组

开辟一个新的内存空间这样对于性能有很大提升

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-17 22:53:31
 * @LastEditTime: 2022-10-18 00:44:32
 */
import React, {  PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      friends: [
        {name: 'lucy', age: 20 },
        {name: 'kity', age: 11 },
        {name: 'nacy', age: 55 },
      ]
    }
  }
  render() {
    return (
      <div>
        <h2>好友列表</h2>
        <ul>
          {
            this.state.friends.map((item, index) => {
              return <li key={ index }>
               姓名: { item.name }
               年龄: { item.age }
               <button onClick={ e => this.incrementAge(index) }>age+1</button>
              </li>
            })
          }
        </ul>
        <button onClick={e => this.insertData() }>添加数据</button>
      </div>
    );
  }

  insertData() {
    //推荐做法
    const newFriends = [...this.state.friends]
    newFriends.push({
      name: 'tom',
      age: 11
    })

    this.setState({
      friends: newFriends
    })
  }

  incrementAge(index) {
     const newData = [...this.state.friends]
     newData[index].age += 1
     this.setState({
      friends: newData
     })
  }
}

export default App;