Lacak mengapa komponen Bereaksi merender ulang

Apakah ada pendekatan sistematis untuk men-debug apa yang menyebabkan komponen untuk merender ulang di Bereaksi? Saya meletakkan console.log sederhana () untuk melihat berapa banyak waktu render, tetapi saya mengalami kesulitan mencari tahu apa yang menyebabkan komponen untuk membuat beberapa kali yaitu (4 kali) dalam kasus saya. Apakah ada alat yang ada yang menunjukkan timeline dan / atau semua komponen merender dan memesan pohon?

Jika Anda ingin cuplikan singkat tanpa ketergantungan eksternal apa pun, saya merasa ini berguna

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
  if (this.state) {
    Object.entries(this.state).forEach(([key, val]) =>
      prevState[key] !== val && console.log(`State '${key}' changed`)
    );
  }
}

Berikut adalah kait kecil yang saya gunakan untuk melacak pembaruan ke komponen fungsi

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Usage
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

Berikut adalah beberapa contoh yang komponen Bereaksi akan dirender ulang.

• Rerender komponen induk
• Memanggil this.setState()dalam komponen. Hal ini akan memicu metode siklus hidup komponen berikut shouldComponentUpdate> componentWillUpdate> render>componentDidUpdate
• Perubahan komponen props. Akan memicu ini componentWillReceiveProps> shouldComponentUpdate> componentWillUpdate> render> componentDidUpdate( connectmetode react-reduxpemicu ini bila ada perubahan berlaku di toko Redux)
• panggilan this.forceUpdateyang mirip denganthis.setState

Anda dapat meminimalkan rerender komponen Anda dengan menerapkan pemeriksaan di dalam Anda shouldComponentUpdatedan mengembalikan falsejika tidak perlu.

Cara lain adalah dengan menggunakan React.PureComponent atau komponen stateless. Komponen murni dan stateless hanya di-render ketika ada perubahan pada propsnya.

Jawaban @ jpdelatorre sangat bagus dalam menyoroti alasan umum mengapa komponen Bereaksi dapat di-render ulang.

Saya hanya ingin menyelam sedikit lebih dalam ke satu contoh: ketika alat peraga berubah . Pemecahan masalah apa yang menyebabkan komponen Bereaksi untuk di-render adalah masalah yang umum, dan dalam pengalaman saya banyak kali melacak masalah ini melibatkan menentukan alat peraga mana yang berubah .

Bereaksi komponen yang di-render setiap kali mereka menerima alat peraga baru. Mereka dapat menerima alat peraga baru seperti:

<MyComponent prop1={currentPosition} prop2={myVariable} />

atau jika MyComponentterhubung ke toko redux:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

Kapan saja nilai dari prop1 , prop2, prop3, atau prop4perubahan MyComponentakan kembali membuat. Dengan 4 alat peraga, tidak terlalu sulit untuk melacak alat peraga mana yang berubah dengan meletakkan console.log(this.props)pada awal renderblok itu. Namun dengan komponen yang lebih rumit dan lebih banyak alat peraga metode ini tidak dapat dipertahankan.

Berikut ini adalah pendekatan yang berguna (menggunakan lodash untuk kenyamanan) untuk menentukan perubahan prop mana yang menyebabkan komponen dirender ulang:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

Menambahkan potongan ini ke komponen Anda dapat membantu mengungkap pelakunya yang menyebabkan perenderan ulang yang dipertanyakan, dan sering kali ini membantu menjelaskan data yang tidak perlu yang disalurkan ke komponen.

Tidak ada yang aneh telah memberikan jawaban itu tetapi saya merasa sangat berguna, terutama karena perubahan alat peraga hampir selalu sangat bersarang.

Fanboys kait:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

"Old" - fanboys sekolah:

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

PS Saya masih lebih suka menggunakan HOC (komponen pesanan lebih tinggi) karena kadang-kadang Anda telah merusak alat peraga Anda di bagian atas dan solusi Yakub tidak cocok dengan baik

Penafian: Tidak ada afiliasi apa pun dengan pemilik paket. Hanya mengklik puluhan kali di sekitar untuk mencoba melihat perbedaan pada objek yang bersarang secara mendalam adalah rasa sakit di.

Sekarang ada pengait untuk ini tersedia di npm:

https://www.npmjs.com/package/use-trace-update

(Pengungkapan, saya menerbitkannya) Pembaruan: Dikembangkan berdasarkan kode Jacob Rask

Menggunakan kait dan komponen fungsional, bukan hanya penyangga perubahan dapat menyebabkan rerender. Apa yang mulai saya gunakan adalah log yang agak manual. Saya banyak membantu saya. Anda mungkin menemukan itu berguna juga.

Saya tempel bagian ini di file komponen:

const keys = {};
const checkDep = (map, key, ref, extra) => {
  if (keys[key] === undefined) {
    keys[key] = {key: key};
    return;
  }
  const stored = map.current.get(keys[key]);

  if (stored === undefined) {
    map.current.set(keys[key], ref);
  } else if (ref !== stored) {
    console.log(
      'Ref ' + keys[key].key + ' changed',
      extra ?? '',
      JSON.stringify({stored}).substring(0, 45),
      JSON.stringify({now: ref}).substring(0, 45),
    );
    map.current.set(keys[key], ref);
  }
};

Di awal metode saya menyimpan referensi WeakMap:

const refs = useRef(new WeakMap());

Kemudian setelah setiap panggilan "mencurigakan" (alat peraga, kait) saya menulis:

const example = useExampleHook();
checkDep(refs, 'example ', example);

Jawaban di atas sangat membantu, kalau-kalau ada yang mencari metode specfic untuk mendeteksi penyebab rerender maka saya menemukan perpustakaan ini redux-logger sangat membantu.

Yang bisa Anda lakukan adalah menambahkan perpustakaan dan mengaktifkan pembedaan antar negara (ada di dokumen) seperti:

const logger = createLogger({
    diff: true,
});

Dan tambahkan middleware di toko.

Kemudian masukkan console.log()fungsi render dari komponen yang ingin Anda uji.

Kemudian Anda dapat menjalankan aplikasi Anda dan memeriksa log konsol. Di mana pun ada log tepat sebelum itu akan menunjukkan perbedaan antara negara (nextProps and this.props)dan Anda dapat memutuskan apakah render benar-benar diperlukan di sana

Ini akan mirip dengan gambar di atas bersama dengan tombol diff.