Posso atualizar os adereços de um componente no React.js?

Depois de começar a trabalhar com o React.js, parece que ele propsdeve ser estático (transmitido do componente pai), enquanto as statealterações são baseadas em eventos. No entanto, notei nos documentos uma referência a componentWillReceiveProps, que inclui especificamente este exemplo:

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

Isso parece implicar que as propriedades PODEM mudar em um componente com base na comparação de nextPropspara this.props. o que estou perdendo? Como os adereços mudam ou estou enganado sobre como isso é chamado?

Um componente não pode atualizar seus próprios adereços, a menos que sejam matrizes ou objetos (ter um componente atualizando seus próprios adereços, mesmo que possível seja um antipadrão), mas pode atualizar seu estado e os adereços de seus filhos.

Por exemplo, um painel tem um speedcampo em seu estado e o passa para um filho do Gauge que exibe essa velocidade. Seu rendermétodo é justo return <Gauge speed={this.state.speed} />. Quando o Painel chama this.setState({speed: this.state.speed + 1}), o Medidor é renderizado novamente com o novo valor para speed.

Antes que isso aconteça, o Gauge componentWillReceivePropsé chamado, para que o Gauge tenha a chance de comparar o novo valor ao antigo.

ADEREÇOS

Um componente React deve usar adereços para armazenar informações que podem ser alteradas, mas só podem ser alteradas por um componente diferente.

ESTADO

Um componente React deve usar state para armazenar informações que o próprio componente pode alterar.

Um bom exemplo já é fornecido pela Valéry.

Os adereços podem mudar quando o pai de um componente o renderiza novamente com propriedades diferentes. Eu acho que isso é principalmente uma otimização para que nenhum novo componente precise ser instanciado.

Truque para atualizar adereços se eles são 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,
  },
});

Muita coisa mudou com os ganchos, por exemplo, componentWillReceivePropstransformados em useEffect+ useRef( como mostrado nesta outra resposta do SO ), mas os Props ainda são somente leitura , portanto, apenas o método de chamada deve atualizá-lo.

se você usar recompose, usemapProps para criar novos adereços derivados dos adereços recebidos

Edite por exemplo:

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