Aşağıdaki kancalar örneğini ele alırsak

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

Temel olarak, aşağıdaki örnekte olduğu gibi, bileşeni React sınıfı bileşenlerde hemen yeniden oluşturmaya zorlamak için this.forceUpdate () yöntemini kullanıyoruz.

    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>
        }
 }

Ancak benim sorgum, yukarıdaki işlevsel bileşeni kancalarla hemen yeniden oluşturmaya nasıl zorlayabilirim?

Bu mümkündür useStateveya useReducerberi useStatekullanımlar useReduceriçten :

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

forceUpdatenormal koşullar altında, yalnızca testlerde veya diğer olağanüstü durumlarda kullanılması amaçlanmamıştır. Bu durum daha geleneksel bir şekilde ele alınabilir.

setCountyanlış kullanılan bir örnektir forceUpdate, setStateperformans nedenleriyle eşzamansızsa ve devlet güncelleştirmeleri doğru gerçekleştirilen getirilmediği için senkron olmak zorunda olmamalıdır. Bir durum önceden ayarlanmış duruma bağlıysa, bu güncelleme işlevi ile yapılmalıdır ,

Durumu önceki duruma göre ayarlamanız gerekiyorsa, aşağıdaki güncelleyici bağımsız değişkenini okuyun.

<...>

Güncelleyici işlevi tarafından alınan durum ve nesnelerin güncel olması garanti edilir. Güncelleyicinin çıktısı sığ bir şekilde durum ile birleştirilir.

setCount açıklayıcı bir örnek olmayabilir çünkü amacı belirsizdir, ancak güncelleme işlevi için durum budur:

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

Bu, geri çağırma olarak kullanılan işlevlerin daha iyi hatırlanması gerektiği dışında, kancalara 1: 1 olarak çevrilir:

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

Diğerlerinin de belirttiği gibi, useStateçalışır - işte mobx-react-lite güncellemeleri nasıl uygular - benzer bir şey yapabilirsiniz.

Yeni bir kanca tanımlayın, useForceUpdate-

import { useState, useCallback } from 'react'

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

ve bir bileşende kullanın -

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

Bkz. Https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts ve https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver .ts

Genel olarak, bir güncellemeyi tetiklemek istediğiniz herhangi bir durum işleme yaklaşımını kullanabilirsiniz.

TypeScript ile

kodlar ve kutu örneği

useState

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

useReducer

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

özel kanca olarak

Sadece tercih ettiğiniz yaklaşımı böyle sarın

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

Bu nasıl çalışır?

" Bir güncellemeyi tetiklemek " , React motoruna bazı değerlerin değiştiğini ve bileşeninizi yeniden göndermesi gerektiğini söylemek anlamına gelir.

[, setState]from useState()bir parametre gerektirir. Yeni bir nesneyi bağlayarak ondan kurtuluruz {}.
() => ({})in useReducer, her eylem gönderildiğinde yeni bir nesne döndüren sahte bir indirgeyicidir.
{} (yeni nesne) , durumdaki bir referansı değiştirerek bir güncellemeyi tetiklemesi için gereklidir.

Not: useStatesadece useReduceriçten sarılır . kaynak

NOT: useState ile .bind kullanılması, işlemeler arasında işlev başvurusunda bir değişikliğe neden olur. Burada daha önce açıklandığı gibi useCallback'in içine sarmak mümkündür, ancak o zaman bu seksi bir tek astar ™ olmaz . Reducer sürümü , işlemeler arasında referans eşitliğini zaten korur . ForceUpdate işlevini props'ta geçirmek istiyorsanız bu önemlidir.

düz JS

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

@ MinhKha'nın cevabına alternatif:

Şunlarla çok daha temiz olabilir useReducer:

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

Kullanım: forceUpdate()- paramsız temizleyici

UseState'i şu şekilde tanımlayabilirsiniz:

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

Ve kullanım: forceUpdate(n => !n)

Umarım bu yardımcı olur!

Tercihen bileşeninizin yalnızca duruma ve props'a bağlı olmasını sağlamalısınız ve beklendiği gibi çalışacaktır, ancak bileşeni yeniden oluşturmaya zorlamak için gerçekten bir işleve ihtiyacınız varsa, useStatekancayı kullanabilir ve gerektiğinde işlevi çağırabilirsiniz.

Misal

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/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

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

React Hooks SSS resmi çözümü forceUpdate:

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

Çalışma örneği

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>

Basit kod

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

Kullanım:

forceUpdate();

React'in JSX kodunda boole'leri yazdırmaması gerçeğinden yararlanarak (ab) bir yeniden oluşturucuyu zorlamak için normal kancaları kullanabilirsiniz

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

Olası seçenek, güncellemeyi yalnızca belirli bir bileşen kullanarak zorlamaktır key. Anahtarın güncellenmesi, bileşenin (daha önce güncellenemeyen) bir işlemesini tetikler

Örneğin:

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

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

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

Tek satırda çözüm:

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

UseReducer hakkında buradan bilgi edinebilirsiniz. https://reactjs.org/docs/hooks-reference.html#usereducer

Tek satırlık çözüm:

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

useState bir çift değer döndürür: mevcut durum ve onu güncelleyen bir işlev - durum ve ayarlayıcı , burada yeniden oluşturmaya zorlamak için yalnızca ayarlayıcıyı kullanıyoruz.

Benim varyasyonum forceUpdatebir yoluyla counterdeğil, daha çok bir nesne yoluyla:

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

Çünkü {} !== {}her seferinde.

Bu, bileşenleri 3 kez oluşturacaktır (eşit öğelere sahip diziler eşit değildir):

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

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

Normal React Class tabanlı bileşenler için, bu URL'deki forceUpdateapi için React Docs'a bakın . Dokümanlar şunları belirtir:

Normalde forceUpdate () 'in tüm kullanımlarından kaçınmaya çalışmalı ve render ()' da sadece this.props ve this.state 'i okumalısınız.

Bununla birlikte, belgelerde şu hususlardan da bahsedilmektedir:

Render () yönteminiz başka verilere bağlıysa, forceUpdate () 'i çağırarak React'e bileşenin yeniden oluşturulması gerektiğini söyleyebilirsiniz.

Bu nedenle, kullanım durumları forceUpdatenadir olsa da ve hiç kullanmadım, ancak diğer geliştiriciler tarafından üzerinde çalıştığım bazı eski kurumsal projelerde kullanıldığını gördüm.

Bu nedenle, İşlevsel Bileşenler için eşdeğer işlevsellik için, bu URL'deki HOOKS için React Belgelerine bakın . Yukarıdaki URL'ye göre, forceUpdateİşlevsel Bileşenler için bir işlevsellik sağlamak için "useReducer" kancası kullanılabilir .

that does not use state or propsAşağıda, bu URL'de CodeSandbox'ta da bulunan bir çalışma kodu örneği sağlanmıştır.

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

NOT: useState kancasını kullanan alternatif bir yaklaşım (useReducer yerine) bu URL'de de mevcuttur .

react-tidysadece bunu yapmak için özel bir kancası var 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>
  )
}

Bu kanca hakkında daha fazla bilgi edinin

Feragatname Bu kütüphanenin yazarıyım.