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.