Bisakah saya memperbarui properti komponen di React.js?

Setelah mulai bekerja dengan React.js, sepertinya propsdimaksudkan untuk menjadi statis (diteruskan dari komponen induk), sementara stateperubahan didasarkan pada peristiwa. Namun, saya perhatikan dalam dokumen itu referensi componentWillReceiveProps, yang secara khusus mencakup contoh ini:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Ini tampaknya menyiratkan bahwa properti BISA berubah pada komponen berdasarkan perbandingan nextPropske this.props. Apa yang saya lewatkan? Bagaimana alat peraga berubah, atau apakah saya salah tentang di mana ini dipanggil?

Sebuah komponen tidak dapat memperbarui propsnya sendiri kecuali jika mereka adalah array atau objek (memiliki komponen memperbarui propsnya sendiri walaupun mungkin merupakan anti-pola), tetapi dapat memperbarui status dan props dari anak-anaknya.

Misalnya, Dasbor memiliki speedbidang dalam kondisinya, dan meneruskannya ke anak Gauge yang menampilkan kecepatan ini. Its rendermetode hanya return <Gauge speed={this.state.speed} />. Saat Dashboard memanggil this.setState({speed: this.state.speed + 1}), Gauge ditampilkan ulang dengan nilai baru untuk speed.

Tepat sebelum ini terjadi, Gauge componentWillReceivePropsdisebut, sehingga Gauge memiliki kesempatan untuk membandingkan nilai baru dengan yang lama.

ATRIBUT

Komponen Bereaksi harus menggunakan alat peraga untuk menyimpan informasi yang dapat diubah, tetapi hanya dapat diubah oleh komponen yang berbeda.

NEGARA

Komponen Bereaksi harus menggunakan status untuk menyimpan informasi yang dapat diubah oleh komponen itu sendiri.

Contoh yang baik sudah disediakan oleh Valéry.

Alat peraga dapat berubah ketika induk komponen membuat komponen lagi dengan properti yang berbeda. Saya pikir ini sebagian besar merupakan optimasi sehingga tidak ada komponen baru yang perlu dipakai.

Trik untuk memperbarui alat peraga jika array:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
      this.state = {
        count: this.props.count
      }
    }
  increment(){
    console.log("this.props.count");
    console.log(this.props.count);
    let count = this.state.count
    count.push("new element");
    this.setState({ count: count})
  }
  render() {

    return (
      <View style={styles.container}>
        <Text>{ this.state.count.length }</Text>
        <Button
          onPress={this.increment.bind(this)}
          title={ "Increase" }
        />
      </View>
    );
  }
}

Counter.defaultProps = {
 count: []
}

export default Counter
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Banyak yang telah berubah dengan kait, misalnya componentWillReceivePropsberubah menjadi useEffect+ useRef( seperti yang ditunjukkan dalam jawaban SO lainnya ), tetapi Alat Peraga masih Read-Only , jadi hanya metode penelepon yang harus memperbaruinya.

jika Anda menggunakan recompose, gunakan mapPropsuntuk membuat alat peraga baru yang berasal dari alat peraga yang masuk

Edit misalnya:

import { compose, mapProps } from 'recompose';

const SomeComponent = ({ url, onComplete }) => (
  {url ? (
    <View />
  ) : null}
)

export default compose(
  mapProps(({ url, storeUrl, history, ...props }) => ({
    ...props,
    onClose: () => {
      history.goBack();
    },
    url: url || storeUrl,
  })),
)(SomeComponent);