javascript - props - ¿Puedo actualizar los accesorios de un componente en React.js?

reactjs setstate

Question

Después de comenzar a trabajar con React.js, parece que los props están destinados a ser estáticos (pasados ​​desde el componente principal), mientras que state cambios de state se basan en los eventos. Sin embargo, noté en los documentos una referencia a componentWillReceiveProps , que incluye específicamente este ejemplo:

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

Esto parece implicar que las propiedades PUEDEN cambiar en un componente basado en la comparación de nextProps con this.props . ¿Qué me estoy perdiendo? ¿Cómo cambian los accesorios, o me equivoco acerca de dónde se llama esto?

Answer 1

Los apoyos pueden cambiar cuando el elemento primario de un componente vuelve a representar el componente con diferentes propiedades. Creo que esto es principalmente una optimización, por lo que no es necesario crear una instancia de ningún componente nuevo.

Answer 2

Truco para actualizar los accesorios si son 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
}
}
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,
},
});

Answer 3

Un componente no puede actualizar sus propios accesorios a menos que sean matrices u objetos (tener un componente que actualice sus propios accesorios, incluso si es posible es un antipatrón), pero puede actualizar su estado y los accesorios de sus elementos secundarios.

Por ejemplo, un Tablero tiene un campo de speed en su estado, y lo pasa a un niño Gauge que muestra esta velocidad. Su método de render es simplemente return <Gauge speed={this.state.speed} /> . Cuando el Tablero llama a this.setState({speed: this.state.speed + 1}) , el Gauge se vuelve a representar con el nuevo valor de speed .

Justo antes de que esto suceda, se llama al componentWillReceiveProps de Gauge, de modo que el indicador tenga la posibilidad de comparar el nuevo valor con el anterior.