Amalan pengoptimuman prestasi bertindak balas: cara mengurangkan jejak memori aplikasi bahagian hadapan

Amalan pengoptimuman prestasi bertindak balas: cara mengurangkan jejak memori aplikasi bahagian hadapan

Pengenalan:
Dengan sentiasa- meningkatkan kerumitan aplikasi bahagian hadapan Dengan peningkatan prestasi, permintaan untuk pengoptimuman prestasi menjadi semakin mendesak. Salah satu arahan penting ialah mengurangkan penggunaan memori. Artikel ini akan memperkenalkan beberapa kaedah praktikal pengoptimuman prestasi React dan menyediakan contoh kod khusus untuk membantu pembangun lebih memahami dan menggunakan strategi pengoptimuman ini.

1. Elakkan pemaparan semula komponen yang tidak perlu
Pemarahan semula komponen dalam React sangat memakan memori, jadi kita perlu cuba mengelakkan pemaparan semula yang tidak perlu. Berikut ialah beberapa strategi pengoptimuman biasa:

1. Gunakan shouldComponentUpdate() atau PureComponent
   React menyediakan kaedah shouldComponentUpdate() untuk menentukan sama ada pemaparan semula diperlukan dengan mengembalikan nilai Boolean komponen. Kami boleh memutuskan sama ada untuk memaparkan semula berdasarkan perubahan dalam prop atau keadaan komponen. Selain itu, anda juga boleh menggunakan React's PureComponent, yang secara automatik akan melakukan perbandingan cetek prop dan keadaan komponen Jika tiada perubahan, komponen tidak akan dipaparkan semula.

Kod sampel:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value === this.props.value) {
      return false;
    }
    return true;
  }

  render() {
    // 渲染逻辑
  }
}

2. Menggunakan fungsi memo()
   React menyediakan fungsi memo(), yang boleh digunakan kepada Komponen Fungsi ditukar kepada komponen "memori" dan hanya akan dipaparkan semula apabila prop berubah. Ini berguna untuk beberapa komponen tanpa kewarganegaraan yang mudah.

Kod contoh:

const MyComponent = React.memo(function MyComponent(props) {
  // 渲染逻辑
});

2 Optimumkan fungsi pengendalian acara komponen
Fungsi pengendalian acara dalam komponen akan dicipta semula setiap kali. ia diberikan, yang mengakibatkan penggunaan memori meningkat. Untuk mengoptimumkan prestasi, kami boleh mempromosikan fungsi pengendalian acara di luar komponen untuk mengelakkan penciptaan berulang.

Kod sampel:

class MyComponent extends React.Component {
  handleClick = () => {
    // 处理逻辑
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

3. Penggunaan munasabah kaedah kitaran hayat komponen
Kaedah kitaran hayat komponen React menyediakan banyak peluang untuk mengoptimumkan prestasi. Berikut ialah beberapa kaedah kitaran hayat dan strategi pengoptimuman yang biasa digunakan:

1. componentDidMount()
   Selepas pemuatan komponen selesai, beberapa pemerolehan data tak segerak atau kesan sampingan lain boleh dilakukan dalam kaedah ini beroperasi. Elakkan melakukan operasi ini dalam kaedah render() untuk mengelakkan rendering semula yang tidak perlu.

Kod sampel:

class MyComponent extends React.Component {
  componentDidMount() {
    // 异步数据获取或其他副作用操作
  }

  render() {
    // 渲染逻辑
  }
}

2. componentWillUnmount()
   Sebelum komponen dinyahlekapkan, anda boleh membersihkan beberapa sumber , contohnya Nyahlanggan, kosongkan pemasa, dsb.

Contoh kod:

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件装载完成后订阅事件
    this.subscription = eventEmitter.subscribe(this.handleEvent);
  }

  componentWillUnmount() {
    // 在组件卸载之前取消订阅事件
    this.subscription.unsubscribe();
  }

  render() {
    // 渲染逻辑
  }
}

4. Optimumkan pemaparan senarai
Penyampaian senarai biasanya merupakan salah satu kesesakan prestasi dalam React aplikasi. Berikut ialah beberapa strategi biasa untuk mengoptimumkan pemaparan senarai:

1. Gunakan atribut utama
   Semasa memaparkan senarai, tetapkan atribut kunci unik kepada setiap item senarai untuk membantu React update Better pengenalpastian perubahan pada setiap item senarai untuk mengelakkan pemaparan semula yang tidak perlu.

Kod contoh:

class MyComponent extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

2. Gunakan senarai maya
   Jika terdapat sejumlah besar item senarai, anda boleh pertimbangkan untuk menggunakan senarai maya untuk pemaparan Hanya tunjukkan item senarai dalam kawasan yang boleh dilihat, mengurangkan bilangan pemaparan dan meningkatkan prestasi.

Kod sampel:

import { FixedSizeList } from 'react-window';

class MyComponent extends React.Component {
  renderRow = ({ index, style }) => {
    const item = this.props.items[index];

    return (
      <div style={style}>
        {item.name}
      </div>
    );
  }

  render() {
    return (
      <FixedSizeList
        height={400}
        width={300}
        itemCount={this.props.items.length}
        itemSize={50}
      >
        {this.renderRow}
      </FixedSizeList>
    );
  }
}

Ringkasan:
Melalui strategi pengoptimuman di atas, kami boleh mengurangkan penggunaan memori aplikasi bahagian hadapan dan menambah baik prestasi aplikasi React . Walau bagaimanapun, perlu diingatkan bahawa pengoptimuman tidak statik dan perlu diselaraskan mengikut situasi sebenar aplikasi. Saya harap artikel ini dapat memberikan sedikit bantuan kepada pembangun dalam mengoptimumkan prestasi React.

Atas ialah kandungan terperinci Amalan pengoptimuman prestasi bertindak balas: cara mengurangkan jejak memori aplikasi bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!