Wie erzwinge ich das Rendern einer funktionalen React-Komponente?

Question 1

Ich habe eine Funktionskomponente und möchte sie zum erneuten Rendern zwingen.

Wie kann ich das tun?
Da es keine Instanz gibt thisIch kann nicht anrufen this.forceUpdate().

Question 2

🎉 Sie können jetzt mit Haken reagieren

Mit Reaktionshaken können Sie jetzt anrufen useState() in Ihrem Funktionsbaustein.

useState() wird ein Array von 2 Dingen zurückgeben:

Ein Wert, der den aktuellen Status darstellt.
Sein Setzer. Verwenden Sie es, um den Wert zu aktualisieren.

Das Aktualisieren des Werts durch seinen Setter zwingt Ihre Funktionskomponente zum erneuten Rendern,
so wie forceUpdate tut:

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update state to force render
    // A function that increment 👆🏻 the previous state like here 
    // is better than directly setting `setValue(value + 1)`
}

function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    
    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

Eine Demo finden Sie hier.

Die obige Komponente verwendet eine benutzerdefinierte Hook-Funktion (useForceUpdate), die den React-State-Hook verwendet useState. Es erhöht den Zustandswert der Komponente und weist React somit an, die Komponente neu zu rendern.

BEARBEITEN

In einer alten Version dieser Antwort verwendete das Snippet einen booleschen Wert und schaltete ihn ein forceUpdate(). Nachdem ich meine Antwort bearbeitet habe, verwendet das Snippet eine Zahl anstelle eines booleschen Werts.

Warum ? (du würdest mich fragen)

Denn einmal ist es mir passiert, dass mein forceUpdate() wurde zweimal nacheinander von 2 verschiedenen Ereignissen aufgerufen, und somit wurde der boolesche Wert auf seinen ursprünglichen Zustand zurückgesetzt, und die Komponente wurde nie gerendert.

Dies liegt daran, dass in der useStates Setter (setValue hier), React Vergleichen Sie den vorherigen Zustand mit dem neuen, und nur rendern, wenn der Zustand unterschiedlich ist.

Question 3

Update reagieren v16.8 (Veröffentlichung vom 16. Februar 2019)

Seit reagieren 16.8 freigegeben mit Hakenhaben Funktionskomponenten die Fähigkeit, persistent zu bleiben state. Mit dieser Fähigkeit können Sie jetzt nachahmen a forceUpdate:

function App() {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  console.log("render");
  return (
    <div>
      <button onClick={forceUpdate}>Force Render</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

Beachten Sie, dass dieser Ansatz überdacht und in Betracht gezogen werden sollte meiste Fälle Wenn Sie ein Update erzwingen müssen, machen Sie wahrscheinlich etwas falsch.

Vor der Reaktion 16.8.0

Nein, das können Sie nicht, zustandslose Funktionskomponenten sind ganz normal functions das kehrt zurück jsxhaben Sie keinen Zugriff auf die React-Lebenszyklusmethoden, da Sie nicht von erweitern React.Component.

Stellen Sie sich die Funktionskomponente als die vor render Methodenteil der Klassenkomponenten.

Question 4

Offizielle FAQ jetzt empfiehlt diesen Weg, wenn Sie Ja wirklich muss es tun:

  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    forceUpdate();
  }

Question 5

Einfachste Art 👌

Wenn Sie ein erneutes Rendern erzwingen möchten, fügen Sie einen Dummy-Status hinzu, den Sie ändern können, um ein erneutes Rendern einzuleiten.

const [rerender, setRerender] = useState(false);

...
setRerender(!rerender);     //whenever you want to re-render

Und dies sorgt für ein erneutes Rendern, und Sie können anrufen setRerender(!rerender) überall, wann immer du willst 🙂

Question 6

Ich habe eine Bibliothek eines Drittanbieters namens
Use-Force-Update

um meine Reaktionsfunktionskomponenten zu rendern. Arbeitete wie Charme. Importieren Sie einfach das Paket in Ihr Projekt und verwenden Sie es so.

import useForceUpdate from 'use-force-update';

const MyButton = () => {

  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    alert('I will re-render now.');
    forceUpdate();
  };

  return <button onClick={handleClick} />;
};

Question 7

Bester Ansatz – keine überflüssigen Variablen, die bei jedem Rendern neu erstellt werden:

const forceUpdateReducer = (i) => i + 1

export const useForceUpdate = () => {
  const [, forceUpdate] = useReducer(forceUpdateReducer, 0)
  return forceUpdate
}

Verwendung:

const forceUpdate = useForceUpdate()

forceUpdate()

Question 8

Wenn Sie bereits einen Status in der Funktionskomponente haben und ihn nicht ändern möchten und ein erneutes Rendern erfordern, können Sie eine Statusaktualisierung vortäuschen, die wiederum die Komponente neu rendern wird

const [items,setItems] = useState({
   name:'Your Name',
   status: 'Idle'
})
const reRender = () =>{
setItems((state) => [...state])
}

Dadurch bleibt der Zustand unverändert und die Reaktion lässt vermuten, dass der Zustand aktualisiert wurde