Bereaksi komponen menginisialisasi keadaan dari alat peraga

Dalam Bereaksi, apakah ada perbedaan nyata antara kedua implementasi ini? Beberapa teman mengatakan kepada saya bahwa FirstComponent adalah polanya, tetapi saya tidak mengerti mengapa. Komponen Kedua tampaknya lebih sederhana karena render disebut hanya sekali.

Pertama:

import React, { PropTypes } from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

Kedua:

import React, { PropTypes } from 'react'

class SecondComponent extends React.Component {

  state = {
    description: ''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

Pembaruan: Saya mengubah setState () ke this.state = {} (thanks joews), Namun, saya masih tidak melihat perbedaannya. Apakah yang satu lebih baik dari yang lain?

Perlu dicatat bahwa ini adalah anti-pola untuk menyalin properti yang tidak pernah berubah ke keadaan (cukup akses .props langsung dalam kasus itu). Jika Anda memiliki variabel keadaan yang pada akhirnya akan berubah tetapi dimulai dengan nilai dari .props, Anda bahkan tidak memerlukan panggilan konstruktor - variabel lokal ini diinisialisasi setelah panggilan ke konstruktor induk:

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

Ini adalah singkatan yang setara dengan jawaban dari @ yoews di bawah ini. Tampaknya hanya bekerja pada versi yang lebih baru dari es6 transpiler, saya memiliki masalah dengan itu pada beberapa pengaturan webpack. Jika ini tidak berhasil untuk Anda, Anda dapat mencoba menambahkan plugin babel babel-plugin-transform-class-properties, atau Anda dapat menggunakan versi non-steno oleh @ joews di bawah ini.

Anda tidak perlu memanggil setStateKomponen constructor- itu idiomatis untuk mengatur this.statelangsung:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

Lihat Bereaksi dokumen - Menambahkan Status Lokal ke Kelas .

Tidak ada keuntungan dengan metode pertama yang Anda gambarkan. Ini akan menghasilkan pembaruan kedua segera sebelum memasang komponen untuk pertama kalinya.

Pembaruan untuk Bereaksi 16.3 alfa diperkenalkan static getDerivedStateFromProps(nextProps, prevState)( dokumen ) sebagai pengganti componentWillReceiveProps.

getDerivedStateFromProps dipanggil setelah komponen di-instantiate juga ketika menerima props baru. Ini harus mengembalikan objek untuk memperbarui keadaan, atau nol untuk menunjukkan bahwa alat peraga baru tidak memerlukan pembaruan keadaan apa pun.

Perhatikan bahwa jika komponen induk menyebabkan komponen Anda untuk merender ulang, metode ini akan dipanggil meskipun props tidak berubah. Anda mungkin ingin membandingkan nilai-nilai baru dan sebelumnya jika Anda hanya ingin menangani perubahan.

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Itu statis, oleh karena itu ia tidak memiliki akses langsung ke this(tetapi ia memiliki akses ke prevState, yang dapat menyimpan hal-hal yang biasanya terpasang thismisalnyarefs )

diedit untuk mencerminkan koreksi @ nerfologist dalam komentar

Anda bisa menggunakan formulir pendek seperti di bawah ini jika Anda ingin menambahkan semua alat peraga untuk menyatakan dan mempertahankan nama yang sama.

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

atur data keadaan di dalam konstruktor seperti ini

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

itu tidak akan berfungsi jika Anda mengatur di sisi componentDidMount () metode melalui alat peraga.

Jika Anda secara langsung init negara dari alat peraga, itu akan menampilkan peringatan dalam Bereaksi 16.5 (5 September 2018)

Anda bisa menggunakan keynilai untuk mengatur ulang keadaan saat dibutuhkan, lulus alat peraga untuk menyatakan itu bukan praktik yang baik, karena Anda memiliki komponen yang tidak terkontrol dan dikendalikan di satu tempat. Data harus di satu tempat ditangani, baca https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recomendation-fully-uncontrolled-component-with-a -kunci

Anda dapat menggunakan componentWillReceiveProps.

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
  }

    componentWillReceiveProps(nextProps){
        this.setState({ productdatail: nextProps.productdetailProps })
    }

ANDA HARUS HATI-HATI saat Anda menginisialisasi statedari propsdalam konstruktor. Bahkan jika propsdiubah ke yang baru, keadaan tidak akan berubah karena mount tidak pernah terjadi lagi. Jadi getDerivedStateFromPropsada untuk itu.

class FirstComponent extends React.Component {
    state = {
        description: ""
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }

        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}