Kann ich die Requisiten einer Komponente in React.js aktualisieren?

Nach dem Beginn der Arbeit mit React.js scheint propses statisch zu sein (von der übergeordneten Komponente übergeben), während stateÄnderungen auf Ereignissen basieren. Ich habe jedoch in den Dokumenten einen Verweis auf bemerkt componentWillReceiveProps, der speziell dieses Beispiel enthält:

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

Dies scheint zu implizieren, dass sich die Eigenschaften einer Komponente basierend auf dem Vergleich von nextPropszu ändern können this.props. Was vermisse ich? Wie ändern sich Requisiten oder irre ich mich darüber, wo dies genannt wird?

Eine Komponente kann ihre eigenen Requisiten nur aktualisieren, wenn es sich um Arrays oder Objekte handelt (wenn eine Komponente ihre eigenen Requisiten aktualisiert, auch wenn dies ein Anti-Pattern ist), kann sie jedoch ihren Status und die Requisiten ihrer untergeordneten Elemente aktualisieren.

Ein Dashboard hat beispielsweise ein speedFeld in seinem Status und übergibt es an ein untergeordnetes Messgerät, das diese Geschwindigkeit anzeigt. Seine renderMethode ist gerecht return <Gauge speed={this.state.speed} />. Wenn das Dashboard aufruft this.setState({speed: this.state.speed + 1}), wird die Anzeige mit dem neuen Wert für neu gerendert speed.

Kurz bevor dies geschieht, wird Gauge's componentWillReceivePropsaufgerufen, damit das Gauge den neuen Wert mit dem alten vergleichen kann.

REQUISITEN

Eine React-Komponente sollte Requisiten verwenden, um Informationen zu speichern, die geändert werden können, aber nur von einer anderen Komponente geändert werden können.

ZUSTAND

Eine React-Komponente sollte den Status verwenden, um Informationen zu speichern, die die Komponente selbst ändern kann.

Ein gutes Beispiel liefert bereits Valéry.

Requisiten können sich ändern, wenn das übergeordnete Element einer Komponente die Komponente erneut mit unterschiedlichen Eigenschaften rendert. Ich denke, dies ist meistens eine Optimierung, so dass keine neue Komponente instanziiert werden muss.

Trick, um Requisiten zu aktualisieren, wenn sie Array sind:

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

Mit Hooks hat sich viel geändert, z. B. componentWillReceivePropsin useEffect+ useRef( wie in dieser anderen SO-Antwort gezeigt ), aber Requisiten sind immer noch schreibgeschützt , sodass nur die Aufrufermethode sie aktualisieren sollte.

Wenn Sie verwenden recompose, verwenden SiemapProps , um neue Requisiten zu erstellen, die von eingehenden Requisiten abgeleitet sind

Bearbeiten Sie zum Beispiel:

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