Puis-je mettre à jour les accessoires d'un composant dans React.js?

Après avoir commencé à travailler avec React.js, il semble qu'ils propssoient destinés à être statiques (transmis depuis le composant parent), tandis que les statechangements sont basés sur les événements. Cependant, j'ai remarqué dans les documents une référence à componentWillReceiveProps, qui inclut spécifiquement cet exemple:

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

Cela semble impliquer que les propriétés PEUVENT changer sur un composant basé sur la comparaison de nextPropsà this.props. Qu'est-ce que je rate? Comment les accessoires changent-ils ou me trompe-t-on sur la façon dont cela s'appelle?

Un composant ne peut pas mettre à jour ses propres accessoires à moins qu'il ne s'agisse de tableaux ou d'objets (le fait qu'un composant mette à jour ses propres accessoires, même si c'est possible est un anti-modèle), mais peut mettre à jour son état et les accessoires de ses enfants.

Par exemple, un tableau de bord a un speedchamp dans son état et le transmet à un enfant Gauge qui affiche cette vitesse. Sa renderméthode est juste return <Gauge speed={this.state.speed} />. Lorsque le tableau de bord appelle this.setState({speed: this.state.speed + 1}), la jauge est restituée avec la nouvelle valeur de speed.

Juste avant que cela ne se produise, la jauge componentWillReceivePropsest appelée, afin que la jauge ait une chance de comparer la nouvelle valeur à l'ancienne.

PROPS

Un composant React doit utiliser des accessoires pour stocker des informations qui peuvent être modifiées, mais ne peuvent être modifiées que par un autre composant.

ETAT

Un composant React doit utiliser l'état pour stocker des informations que le composant lui-même peut modifier.

Un bon exemple est déjà fourni par Valéry.

Les accessoires peuvent changer lorsque le parent d'un composant rend à nouveau le composant avec des propriétés différentes. Je pense que c'est surtout une optimisation afin qu'aucun nouveau composant ne doive être instancié.

Astuce pour mettre à jour les accessoires s'ils sont des tableaux:

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

Beaucoup de choses ont changé avec les hooks, par exemple componentWillReceivePropstransformés en useEffect+ useRef( comme indiqué dans cette autre réponse SO ), mais les accessoires sont toujours en lecture seule , donc seule la méthode de l'appelant doit la mettre à jour.

si vous utilisez recompose, utilisez mapPropspour créer de nouveaux accessoires dérivés des accessoires entrants

Modifiez par exemple:

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