setState不可變的力量

當(dāng)使用了PureComponent繼承,你直接賦值給你當(dāng)前修改的值是不會更新的,具體代碼如下:

import React, { PureComponent } from "react";

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      friedInfo: [
        {
          name: "zhangsan",
          age: 18,
          sex: "男",
        },
        {
          name: "lisi",
          age: 19,
          sex: "男",
        },
        {
          name: "wangwu",
          age: 20,
          sex: "男",
        },
      ],
    };
  }
  render() {
    const { friedInfo } = this.state;
    return (
      <div>
        <ul>
          {friedInfo.map((item) => {
            return (
              <li key={item.name}>
                <span>{item.name}</span>
                <br />
                <span>{item.age}</span>
                <br />
                <span>{item.sex}</span>
              </li>
            );
          })}
        </ul>
        <button onClick={() => this.addDataInfo()}>添加數(shù)據(jù)</button>
      </div>
    );
  }

  addDataInfo() {
    const newData = { name: "TOM", age: 22, sex: "男" };
    this.state.friedInfo.push(newData);
    this.setState({
      friedInfo:this.state.friedInfo
    })
  }
}

實際截圖

image.png

如果用到了PureComponent 和shouldComponentUpdate優(yōu)化的話,正確的做法就是

addDataInfo() {
const newData = { name: "TOM", age: 22, sex: "男" };
const copyFriedInfo = [...this.state.friedInfo]
copyFriedInfo.push(newData);
this.setState({
friedInfo: copyFriedInfo,
});
}
詳細(xì)的過程 畫了一幅圖,

image.png

需求在年紀(jì)的每一行添加一個按鈕 點擊按鈕+ 1

import React, { PureComponent } from "react";

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      friedInfo: [
        {
          name: "zhangsan",
          age: 18,
          sex: "男",
        },
        {
          name: "lisi",
          age: 19,
          sex: "男",
        },
        {
          name: "wangwu",
          age: 20,
          sex: "男",
        },
      ],
    };
  }
  render() {
    const { friedInfo } = this.state;
    return (
      <div>
        <ul>
          {friedInfo.map((item, index) => {
            return (
              <li key={item.name}>
                <span>{item.name}</span>
                <br />
                <span>
                  <span>{item.age}</span>
                  <button onClick={() => this.addAge(index)}>年紀(jì) + 1</button>
                </span>
                <br />
                <span>{item.sex}</span>
              </li>
            );
          })}
        </ul>
        <button onClick={() => this.addDataInfo()}>添加數(shù)據(jù)</button>
      </div>
    );
  }

  addDataInfo() {
    const newData = { name: "TOM", age: 22, sex: "男" };
    // 數(shù)據(jù)的解構(gòu) copy 一份
    const copyFriedInfo = [...this.state.friedInfo];
    copyFriedInfo.push(newData);
    this.setState({
      friedInfo: copyFriedInfo,
    });
  }

  addAge(index) {
    const newData = [...this.state.friedInfo];
    newData[index].age += 1;
    this.setState({
      friedInfo: newData,
    });
  }
}

實際截圖

[圖片上傳中...(image.png-eb7f2c-1640242382750-0)]