Anwendungsszenarien für React useMemo und useCallback

Funktion Info({
  Stil,
}) {
  console.log('Info-Rendering erfolgt');

  useEffect(() => {
    console.log('Daten neu laden'); // Die Daten werden bei jedem erneuten Rendern neu geladen}, [style]);

  zurückkehren (
    <p Stil={Stil}>
      Dies ist der Text in Info</p>
  );
}

Funktion Seite() {
  console.log('Seitendarstellung');

  const [Anzahl, Anzahl festlegen] = useState(0);
  const Stil = { Farbe: "rot" };

  // Wenn der Zähler +1 ist, wird die Seite neu gerendert, was wiederum das erneute Rendern der Info-Rückgabe auslöst (
    <div>
      <h4>Zählwert: {count}</h4>
      <button onClick={() => setCount(Anzahl + 1)}> +1 </button>
      <Infostil={Stil} />
    </div>
  );
}

Funktion Seite() {
  console.log('Seitendarstellung');

  const [Farbe] = useState('rot');
  const [Anzahl, Anzahl festlegen] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // der Stil ändert sich nur, wenn sich die Farbe deutlich ändert // Wenn der Zähler +1 ist, wird ein erneutes Rendern der Seite ausgelöst, was wiederum ein erneutes Rendern der Informationen auslöst // Da der Stil jedoch zwischengespeichert wird, wird dies kein erneutes Laden der Daten in der Informationen-Rückgabe auslösen (
    <div>
      <h4>Zählwert: {count}</h4>
      <button onClick={() => setCount(Anzahl + 1)}> +1 </button>
      <Infostil={Stil} />
    </div>
  );
}

Klasse Parent erweitert React.Component {
   Zustand = {
    Abfrage: 'Schlüsselwort',
  }

  getData() {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;
    // Daten anfordern...
    console.log(`Anforderungspfad: ${url}`);
  }

  rendern() {
    zurückkehren (
      // Übergeben eines Abfragewerts, den eine untergeordnete Komponente nicht rendert <Child getData={this.getData} query={this.state.query} />
    );
  }
}

Klasse Child erweitert React.Component {
  componentDidMount() {
    dies.props.getData();
  }

  componentDidUpdate(vorherigeProps) {
    // if (prevProps.getData !== this.props.getData) { // Diese Bedingung ist immer wahr
    // diese.props.getData();
    // }
    if (prevProps.query !== this.props.query) { // Kann nur den Abfragewert zur Beurteilung verwenden this.props.getData();
    }
  }

  rendern() {
    zurückkehren (
      // ...
    );
  }
}

Funktion Übergeordnet() {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [Abfrage, setQuery] = useState('Schlüsselwort');

  const getData = useCallback(() => {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}`;
    // Daten anfordern...
    console.log(`Anforderungspfad: ${url}`);
  }, [Abfrage]); // getData wird nur aktualisiert, wenn sich die Abfrage ändert // Änderungen im Zählwert führen nicht dazu, dass Child die Datenrückgabe erneut anfordert (
    <>
      <h4>Zählwert: {count}</h4>
      <button onClick={() => setCount(Anzahl + 1)}> +1 </button>
      <input onChange={(e) => {setQuery(e.target.value)}} />
      <Untergeordnetes getData={getData} />
    </>
  );
}

Funktion Kind({
  Daten abrufen
}) {
  useEffect(() => {
    getData();
  }, [getData]); // Funktionen können am Datenfluss teilnehmen, da Abhängigkeiten zurückkehren (
    // ...
  );
}