Apakah kitaran hayat tindak balas yang baru ditambah?-Soal Jawab bahagian hadapan-php.cn

Apakah kitaran hayat tindak balas yang baru ditambah?

青灯夜游

Lepaskan： 2022-03-21 18:28:22

asal

3022 orang telah melayarinya

Kitaran hayat yang baru ditambah ialah: 1. getDerivedStateFromProps, digunakan untuk mengawal proses keadaan pengemaskinian prop; 2. getSnapshotBeforeUpdate, digunakan untuk membaca data DOM terkini;

Apakah kitaran hayat tindak balas yang baru ditambah?

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Apabila mempelajari React, kitaran hayat adalah sangat penting Setelah kita memahami setiap komponen kitaran hayat, ia akan membantu untuk menulis komponen berprestasi tinggi

Kitaran hayat React terbahagi kepada tiga keadaan 1 . Permulaan 2. Kemas kini 3. Pemusnahan

Bertindak balas 17 kitaran hayat baharu

1 🎜>

Dokumen tapak web rasmi menunjukkan bahawa kod yang menggunakan kitaran hayat ini akan lebih berkemungkinan menghasilkan pepijat dalam versi tindak balas akan datang, terutamanya untuk versi pemaparan tak segerak

Sejak tak segerak mekanisme pemaparan akan diterima pakai pada masa hadapan, ia akan menjadi Fungsi cangkuk kitaran hayat dikeluarkan dalam versi 17

componentWillMount

componentWillRecieveProps

componentWIllUpdate

2. Kitaran hayat baharu

getDerivedStateFromProps(nextProps, prevState)

digunakan untuk menggantikan componentWillReceiveProps dan boleh digunakan untuk mengawal proses keadaan pengemaskinian props; objek yang mewakili keadaan baharu; jika tiada kemas kini diperlukan, kembalikan null boleh dipanggil

sebelum setiap pemaparan, tanpa mengira pelekapan awal atau kemas kini berikutnya Ini berbeza daripada componentWillReceiveProps (hanya dipanggil apabila komponen induk menyebabkan re -rendering

Pemahaman mudah adalah untuk mendapatkan keadaan daripada props Fungsi kitaran hayat ini sebenarnya untuk memetakan prop yang masuk untuk menyatakan

getDerivedStateFromProps ialah fungsi statik, iaitu fungsi ini. tidak boleh mengakses kelas melalui ini Ia tidak disyorkan untuk mengakses sifat secara langsung Sebaliknya, ia harus dinilai oleh nextProps dan prevState yang disediakan oleh parameter, dan dipetakan untuk menyatakan

mengikut prop yang baru diluluskan jika. kandungan yang dihantar oleh prop tidak perlu terjejas ke keadaan anda, maka anda perlu mengembalikan nilai nol ini, jadi cuba tuliskannya ke penghujung fungsi

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

Salin selepas log masuk

getSnapshotBeforeUpdate()

Dalam perubahan terkini Sebelum diserahkan kepada elemen DOM, komponen boleh mendapatkan nilai semasa sebelum menukar Sebarang nilai yang dikembalikan oleh kitaran hayat ini akan diserahkan kepada componentDidUpdate() untuk penggantian componentWillUpdate. . Fungsi ini akan mengemas kini DOM selepas kemas kini dipanggil sebelum ini, digunakan untuk membaca data DOM terkini, nilai pulangan akan digunakan sebagai parameter ketiga componentDidUpdate

akan dipanggil segera sebelum data rendering terkini. diserahkan kepada DOM, yang membolehkan anda mengemas kini data komponen Dapatkannya sebelum menukar

Jika komponen mentakrifkan kitaran hayat componentDidCatch, ia akan menjadi sempadan ralat (sempadan ralat akan ditangkap semasa rendering, dalam kaedah kitar hayat dan Ralat dalam pembina keseluruhan pokok di bawahnya, componendDidCatch(error, info)

adalah seperti menggunakan try catch, ralat tidak akan dibuang terus, memastikan ketersediaan aplikasi)

3. Penggunaan asas

[Cadangan berkaitan:

Tutorial video Redis

class A extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数，所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件，多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}
  // 用于获得最新的 DOM 数据
  getSnapshotBeforeUpdate() {}
  // 组件即将销毁
  // 可以在此处移除订阅，定时器等等
  componentWillUnmount() {}
  // 组件销毁后调用
  componentDidUnMount() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 渲染组件函数
  render() {}
}

Salin selepas log masuk

]

Atas ialah kandungan terperinci Apakah kitaran hayat tindak balas yang baru ditambah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!