Cara menggunakan metode siklus hidup getDerivedStateFromProps sebagai kebalikan dari componentWillReceiveProps

Sepertinya componentWillReceivePropsakan sepenuhnya dihapus dalam rilis mendatang, mendukung metode siklus hidup baru getDerivedStateFromProps: getDerivedStateFromProps statis () .

Setelah diperiksa, sepertinya Anda sekarang tidak dapat membuat perbandingan langsung antara this.propsdan nextProps, seperti yang Anda bisa lakukan componentWillReceiveProps. Apakah ada cara untuk mengatasi ini?

Juga, sekarang mengembalikan objek. Apakah saya benar mengasumsikan bahwa nilai pengembalian pada dasarnya this.setState?

Di bawah ini adalah contoh yang saya temukan online: Negara bagian berasal dari properti / negara bagian .

Sebelum

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

Setelah

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

Tentang penghapusan componentWillReceiveProps: Anda harus dapat menangani penggunaannya dengan kombinasi getDerivedStateFromPropsdan componentDidUpdate, lihat Bereaksi blog sebagai contoh migrasi. Dan ya, objek yang dikembalikan oleh getDerivedStateFromPropspembaruan negara mirip dengan objek yang diteruskan setState.

Jika Anda benar-benar membutuhkan nilai prop yang lama, Anda dapat selalu menyimpannya di negara Anda dengan sesuatu seperti ini:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

Apa pun yang tidak mempengaruhi keadaan dapat dimasukkan ke dalam componentDidUpdate, dan bahkan ada getSnapshotBeforeUpdatehal-hal yang sangat rendah.

PEMBARUAN: Untuk merasakan metode siklus hidup yang baru (dan yang lama), paket visualisator siklus hidup dapat membantu.

Seperti yang baru-baru ini kami posting di blog Bereaksi , dalam sebagian besar kasus Anda tidak perlu getDerivedStateFromPropssama sekali .

Jika Anda hanya ingin menghitung beberapa data turunan, baik:

1. Lakukan tepat di dalam render
2. Atau, jika menghitung ulang biayanya mahal, gunakan pembantu memoisasi seperti memoize-one.

Inilah contoh "setelah" yang paling sederhana:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

Lihatlah bagian posting blog ini untuk mempelajari lebih lanjut.

Seperti yang disebutkan oleh Dan Abramov

Lakukan tepat di dalam render

Kami benar-benar menggunakan pendekatan itu dengan memoise satu untuk segala jenis alat proxy untuk menyatakan perhitungan.

Kode kami terlihat seperti ini

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

Manfaatnya adalah Anda tidak perlu kode ton boilerplate perbandingan di dalam getDerivedStateFromPropsatau componentWillReceivePropsdan Anda dapat melewati inisialisasi salin-tempel di dalam konstruktor.

CATATAN:

Pendekatan ini hanya digunakan untuk proksi alat peraga untuk menyatakan, jika Anda memiliki beberapa logika keadaan dalam, masih perlu ditangani dalam siklus hidup komponen.