Tepki bileşeni, sahne biriminden durumu başlatma

React'te bu iki uygulama arasında gerçek farklılıklar var mı? Bazı arkadaşlar bana FirstComponent'in kalıp olduğunu söylüyor, ama nedenini göremiyorum. İkinci bileşen daha basit görünüyor çünkü oluşturma yalnızca bir kez çağrılıyor.

İlk:

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;

İkinci:

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;

Güncelleme: setState () öğesini this.state = {} olarak değiştirdim (teşekkürler joews), Ancak yine de farkı görmüyorum. Biri diğerinden daha iyi mi?

Hiçbir zaman duruma geçmeyen özellikleri kopyalamanın bir anti-desen olduğu belirtilmelidir (sadece bu durumda .props'a doğrudan erişin). Sonunda değişecek ancak .props değerinden başlayan bir durum değişkeniniz varsa, bir yapıcı çağrısına bile ihtiyacınız yoktur - bu yerel değişkenler, üst öğenin yapıcısına yapılan bir çağrıdan sonra başlatılır:

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

Bu, aşağıdaki @ joews tarafından verilen yanıtın kısayoluna eşdeğerdir. Sadece es6 transpillerin daha yeni sürümlerinde çalışıyor gibi görünüyor, bazı webpack kurulumlarında bununla ilgili sorunlar yaşadım. Bu sizin için işe yaramazsa, babel eklentisini eklemeyi deneyebilir babel-plugin-transform-class-propertiesveya aşağıdaki @joews tarafından steno olmayan sürümü kullanabilirsiniz.

setStateBir Bileşenleri aramanız gerekmez constructor- this.statedoğrudan ayarlamak deyimseldir :

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Bkz. Tepki belgeleri - Bir Sınıfa Yerel Durum Ekleme .

Açıkladığınız ilk yöntemin bir avantajı yoktur. Bileşeni ilk kez monte etmeden hemen önce ikinci bir güncelleme ile sonuçlanacaktır.

React 16.3 alfa güncellemesistatic getDerivedStateFromProps(nextProps, prevState) ( docs ) yerine geçmiştircomponentWillReceiveProps .

getDerivedStateFromProps, bir bileşen başlatıldıktan sonra ve yeni sahne aldığında çağrılır. Durumu güncellemek için bir nesne döndürmeli veya yeni desteklerin durum güncellemesi gerektirmediğini belirtmek için null değerini döndürmelidir.

Bir üst bileşen bileşeninizin yeniden oluşturulmasına neden oluyorsa, sahne donanımı değişmemiş olsa bile bu yöntemin çağrıldığını unutmayın. Yalnızca değişiklikleri işlemek istiyorsanız yeni ve önceki değerleri karşılaştırmak isteyebilirsiniz.

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

Bu nedenle doğrudan erişimi yok, statik this(ancak erişimi var prevState, normalde ekli şeyleri saklamak hangi thisörn refs)

@ nerfologist'in yorumdaki düzeltmesini yansıtacak şekilde düzenlendi

Tüm destekleri aynı isimleri belirtmek ve tutmak için aşağıdaki gibi kısa formu kullanabilirsiniz.

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

kurucu içindeki durum verilerini böyle ayarlayın

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

u props aracılığıyla side componentDidMount () yönteminde ayarlanırsa çalışmaz.

Durumu doğrudan sahne setinden başlatırsanız, React 16.5 (5 Eylül 2018)

keyİhtiyacınız olduğunda durumu sıfırlamak için değeri kullanabilirsiniz , iyi bir uygulama olmadığını belirtmek için destekleri geçebilirsiniz, çünkü tek bir yerde kontrolsüz ve kontrollü bileşeniniz vardır. Veriler tek bir yerde ele alınmalıdır bu https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -tuşu

ComponentWillReceiveProps kullanabilirsiniz.

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

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

EĞER sen başlatmak zaman dikkatli olmak zorunda statedan propsyapıcısı içinde. Yenisi ile propsdeğiştirilse bile , devlet değişmeyecek çünkü mount bir daha asla gerçekleşmeyecek. Bunun getDerivedStateFromPropsiçin var.

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} /> 
        );
    }
}