Betrachtet man unten das Hakenbeispiel

   import { useState } from 'react';

   function Example() {
       const [count, setCount] = useState(0);

       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>
                  Click me
               </button>
          </div>
        );
     }

Grundsätzlich verwenden wir die Methode this.forceUpdate (), um zu erzwingen, dass die Komponente in React-Klassenkomponenten wie im folgenden Beispiel sofort neu gerendert wird

    class Test extends Component{
        constructor(props){
             super(props);
             this.state = {
                 count:0,
                 count2: 100
             }
             this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component 
        }
        setCount(){
              let count = this.state.count;
                   count = count+1;
              let count2 = this.state.count2;
                   count2 = count2+1;
              this.setState({count});
              this.forceUpdate();
              //before below setState the component will re-render immediately when this.forceUpdate() is called
              this.setState({count2: count
        }

        render(){
              return (<div>
                   <span>Count: {this.state.count}></span>. 
                   <button onClick={this.setCount}></button>
                 </div>
        }
 }

Meine Frage lautet jedoch: Wie kann ich die oben genannte Funktionskomponente zwingen, sofort mit Hooks neu zu rendern?

Dies ist möglich , mit useStateoder useReducer, da useStateAnwendungen useReducerintern :

const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);

forceUpdateist nicht für den normalen Gebrauch vorgesehen, nur für Tests oder andere offene Fälle. Diese Situation kann auf konventionellere Weise angegangen werden.

setCountist ein Beispiel für eine nicht ordnungsgemäße Verwendung forceUpdate, setStateist aus Leistungsgründen asynchron und sollte nicht zur Synchronisierung gezwungen werden, nur weil Statusaktualisierungen nicht korrekt durchgeführt wurden. Wenn sich ein Status auf den zuvor festgelegten Status stützt, sollte dies mit der Updater-Funktion erfolgen .

Wenn Sie den Status basierend auf dem vorherigen Status festlegen müssen, lesen Sie das unten stehende Updater-Argument.

<...>

Sowohl der Status als auch die von der Updater-Funktion empfangenen Requisiten sind garantiert auf dem neuesten Stand. Die Ausgabe des Updaters wird flach mit dem Status zusammengeführt.

setCount Dies ist möglicherweise kein anschauliches Beispiel, da sein Zweck unklar ist. Dies gilt jedoch für die Updater-Funktion:

setCount(){
  this.setState(({count}) => ({ count: count + 1 }));
  this.setState(({count2}) => ({ count2: count + 1 }));
  this.setState(({count}) => ({ count2: count + 1 }));
}

Dies wird 1: 1 in Hooks übersetzt, mit der Ausnahme, dass Funktionen, die als Rückrufe verwendet werden, besser gespeichert werden sollten:

   const [state, setState] = useState({ count: 0, count2: 100 });

   const setCount = useCallback(() => {
     setState(({count}) => ({ count: count + 1 }));
     setState(({count2}) => ({ count2: count + 1 }));
     setState(({count}) => ({ count2: count + 1 }));
   }, []);

Wie die anderen bereits erwähnt haben, useStatefunktioniert - so implementiert mobx-react-lite Updates - können Sie etwas Ähnliches tun.

Definieren Sie einen neuen Haken, useForceUpdate-

import { useState, useCallback } from 'react'

export function useForceUpdate() {
  const [, setTick] = useState(0);
  const update = useCallback(() => {
    setTick(tick => tick + 1);
  }, [])
  return update;
}

und verwenden Sie es in einer Komponente -

const forceUpdate = useForceUpdate();
if (...) {
  forceUpdate(); // force re-render
}

Siehe https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts und https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver .ts

Im Allgemeinen können Sie jeden Statusbehandlungsansatz verwenden, mit dem Sie ein Update auslösen möchten.

Mit TypeScript

Code und Box Beispiel

useState

const forceUpdate: () => void = React.useState()[1].bind(null, {})  // see NOTE below

useReducer

const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void

als benutzerdefinierter Haken

Wickeln Sie einfach den von Ihnen bevorzugten Ansatz so ein

function useForceUpdate(): () => void {
  return React.useReducer(() => ({}), {})[1] as () => void // <- paste here
}

Wie funktioniert das?

" Ein Update auslösen " bedeutet, der React Engine mitzuteilen, dass sich ein Wert geändert hat und dass Ihre Komponente erneut gerendert werden soll.

[, setState]from useState()erfordert einen Parameter. Wir werden es los, indem wir ein neues Objekt binden {}.
() => ({})in useReducerist ein Dummy-Reduzierer, der jedes Mal, wenn eine Aktion ausgelöst wird, ein neues Objekt zurückgibt.
{} (frisches Objekt) ist erforderlich, damit eine Aktualisierung durch Ändern einer Referenz im Status ausgelöst wird.

PS: useStateWraps nur useReducerintern. Quelle

HINWEIS: Die Verwendung von .bind mit useState führt zu einer Änderung der Funktionsreferenz zwischen den Renderings. Es ist möglich, es in useCallback zu verpacken, wie hier bereits erklärt , aber dann wäre es kein sexy Einzeiler ™ . Die Reducer-Version behält bereits die Referenzgleichheit zwischen Renderings bei. Dies ist wichtig, wenn Sie die forceUpdate-Funktion in Requisiten übergeben möchten.

einfache JS

const forceUpdate = React.useState()[1].bind(null, {})  // see NOTE above
const forceUpdate = React.useReducer(() => ({}))[1]

Alternative zu @ MinhKhas Antwort:

Es kann viel sauberer sein mit useReducer:

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

Verwendung: forceUpdate()- Reiniger ohne Parameter

Sie können den useState einfach so definieren:

const [, forceUpdate] = React.useState(0);

Und Verwendung: forceUpdate(n => !n)

Ich hoffe das hilft !

Sie sollten Ihre Komponente vorzugsweise nur vom Status und den Requisiten abhängig machen, damit sie wie erwartet funktioniert. Wenn Sie jedoch wirklich eine Funktion benötigen, um das erneute Rendern der Komponente zu erzwingen, können Sie den useStateHook verwenden und die Funktion bei Bedarf aufrufen.

Beispiel

const { useState, useEffect } = React;

function Foo() {
  const [, forceUpdate] = useState();

  useEffect(() => {
    setTimeout(forceUpdate, 2000);
  }, []);

  return <div>{Date.now()}</div>;
}

ReactDOM.render(<Foo />, document.getElementById("root"));

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>

React Hooks FAQ offizielle Lösung für forceUpdate:

const [_, forceUpdate] = useReducer((x) => x + 1, 0);
// usage
<button onClick={forceUpdate}>Force update</button>

Arbeitsbeispiel

const App = () => {
  const [_, forceUpdate] = useReducer((x) => x + 1, 0);

  return (
    <div>
      <button onClick={forceUpdate}>Force update</button>
      <p>Forced update {_} times</p>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js" integrity="sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js" integrity="sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4/R7x4GqCvZ4=" crossorigin="anonymous"></script>
<script>var useReducer = React.useReducer</script>
<div id="root"></div>

Einfacher Code

const forceUpdate = React.useReducer(bool => !bool)[1];

Verwenden:

forceUpdate();

Sie können (ab) normale Hooks verwenden, um ein erneutes Rendern zu erzwingen, indem Sie die Tatsache ausnutzen, dass React keine Booleschen Werte in JSX-Code druckt

// create a hook
const [forceRerender, setForceRerender] = React.useState(true);

// ...put this line where you want to force a rerender
setForceRerender(!forceRerender);

// ...make sure that {forceRerender} is "visible" in your js code
// ({forceRerender} will not actually be visible since booleans are
// not printed, but updating its value will nonetheless force a
// rerender)
return (
  <div>{forceRerender}</div>
)

Mögliche Option ist, die Aktualisierung nur für bestimmte Komponenten zu erzwingen key. Das Aktualisieren des Schlüssels löst ein Rendering der Komponente aus (die zuvor nicht aktualisiert werden konnte).

Zum Beispiel:

const [tableKey, setTableKey] = useState(1);
...

useEffect(() => {
    ...
    setTableKey(tableKey + 1);
}, [tableData]);

...
<DataTable
    key={tableKey}
    data={tableData}/>

Lösung in einer einzigen Zeile:

const [,forceRender] = useReducer((s) => s+1, 0)

Hier erfahren Sie mehr über useReducer. https://reactjs.org/docs/hooks-reference.html#usereducer

Einzeilige Lösung:

const useForceUpdate = () => useState()[1];

useState gibt ein Wertepaar zurück: den aktuellen Status und eine Funktion, die ihn aktualisiert - Status und Setter . Hier verwenden wir nur den Setter, um ein erneutes Rendern zu erzwingen.

Meine Variation von forceUpdateerfolgt nicht über ein counter, sondern über ein Objekt:

// Emulates `forceUpdate()`
const [unusedState, setUnusedState] = useState()
const forceUpdate = useCallback(() => setUnusedState({}), [])

Weil {} !== {}jedes Mal.

Dadurch werden abhängige Komponenten dreimal gerendert (Arrays mit gleichen Elementen sind nicht gleich):

const [msg, setMsg] = useState([""])

setMsg(["test"])
setMsg(["test"])
setMsg(["test"])

Informationen zu regulären Komponenten, die auf React Class basieren, finden Sie unter React Docs für die forceUpdateAPI unter dieser URL. Die Dokumente erwähnen Folgendes:

Normalerweise sollten Sie versuchen, alle Verwendungen von forceUpdate () zu vermeiden und nur aus this.props und this.state in render () zu lesen.

In den Dokumenten wird jedoch auch erwähnt, dass:

Wenn Ihre render () -Methode von anderen Daten abhängt, können Sie React mitteilen, dass die Komponente erneut gerendert werden muss, indem Sie forceUpdate () aufrufen.

Obwohl Anwendungsfälle für die Verwendung forceUpdateselten sind und ich sie noch nie verwendet habe, habe ich gesehen, dass sie von anderen Entwicklern in einigen älteren Unternehmensprojekten verwendet wurden, an denen ich gearbeitet habe.

Informationen zu den entsprechenden Funktionen für Funktionskomponenten finden Sie in den React Docs for HOOKS unter dieser URL. Gemäß der obigen URL kann der Hook "useReducer" verwendet werden, um eine forceUpdateFunktionalität für Funktionskomponenten bereitzustellen .

Im that does not use state or propsFolgenden finden Sie ein funktionierendes Codebeispiel , das auch in CodeSandbox unter dieser URL verfügbar ist

import React, { useReducer, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  // Use the useRef hook to store a mutable value inside a functional component for the counter
  let countref = useRef(0);

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

  function handleClick() {
    countref.current++;
    console.log("Count = ", countref.current);
    forceUpdate(); // If you comment this out, the date and count in the screen will not be updated
  }

  return (
    <div className="App">
      <h1> {new Date().toLocaleString()} </h1>
      <h2>You clicked {countref.current} times</h2>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        ClickToUpdateDateAndCount
      </button>
    </div>
  );
}

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

HINWEIS: Unter dieser URL ist auch ein alternativer Ansatz mit dem useState-Hook (anstelle von useReducer) verfügbar .

react-tidyhat einen benutzerdefinierten Haken nur dafür useRefresh:

import React from 'react'
import {useRefresh} from 'react-tidy'

function App() {
  const refresh = useRefresh()
  return (
    <p>
      The time is {new Date()} <button onClick={refresh}>Refresh</button>
    </p>
  )
}

Erfahren Sie mehr über diesen Haken

Haftungsausschluss Ich bin der Autor dieser Bibliothek.