Puis-je mettre à jour les accessoires d'un composant dans React.js?
Après avoir commencé à travailler avec React.js, il semble que props soient destinés à être statiques (transmis à partir du composant parent), tandis que state change en fonction des événements. Cependant, j'ai remarqué dans les docs 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. Ce qui me manque? Comment les accessoires changent-ils, ou est-ce que je me trompe sur l'endroit où cela se produit appelé?
5 réponses
Un composant ne peut pas mettre à jour ses propres accessoires à moins qu'ils ne soient des tableaux ou des objets (avoir un composant mettre à jour ses propres accessoires même si possible est un anti-pattern), mais peut mettre à jour son état et les accessoires de ses enfants.
Par exemple, un tableau de bord a un champ speed dans son état, et le transmet à un enfant de jauge qui affiche cette vitesse. Sa méthode render 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 pour speed.
Juste avant que cela arrive, La jauge componentWillReceiveProps est appelée, de sorte que la jauge a une chance de comparer la nouvelle valeur à l'ancienne.
Les accessoires peuvent changer lorsque le parent d'un composant restitue le composant avec des propriétés différentes. Je pense que c'est surtout une optimisation de sorte qu'aucun nouveau composant doit être instancié.
Accessoires
Un composant React doit utiliser des accessoires pour stocker des informations pouvant être modifié, mais ne peut être modifié que par un composant différent.
État
Un composant React doit utiliser state pour stocker des informations le composant lui-même peut changer.
Un bon exemple est déjà fourni par Valéry.
Astuce pour mettre à jour les accessoires s'ils sont de tableau :
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
}
}
increament(){
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.increament.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,
},
});
Si vous utilisez recompose, utilisez mapProps pour créer de nouveaux accessoires dérivés des accessoires entrants