मैं कैसे रिएक्ट में हुक के साथ फिर से प्रस्तुत करने के लिए घटक को मजबूर कर सकता हूं?

Question 1

हुक के उदाहरण पर विचार करते हुए

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

मूल रूप से हम इसका उपयोग करते हैं ।forceUpdate () विधि को फिर से प्रस्तुत करने के लिए घटक को फिर से प्रस्तुत करने के लिए बाध्य करने के लिए बाध्य करें

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

लेकिन मेरी क्वेरी यह है कि मैं हुक के साथ तुरंत रेंडर करने के लिए कार्यात्मक घटक के ऊपर कैसे बल दे सकता हूं?

Question 2

आंतरिक रूप से उपयोग के बाद से useStateया useReducer, यह संभव है :useStateuseReducer

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

forceUpdateकेवल परीक्षण या अन्य बकाया मामलों में सामान्य परिस्थितियों में उपयोग करने का इरादा नहीं है। इस स्थिति को अधिक परंपरागत तरीके से संबोधित किया जा सकता है।

setCountअनुचित तरीके से उपयोग किए जाने का एक उदाहरण है forceUpdate, setStateप्रदर्शन के कारणों के लिए अतुल्यकालिक है और इसे केवल इसलिए सिंक्रोनस करने के लिए मजबूर नहीं किया जाना चाहिए क्योंकि राज्य अपडेट सही तरीके से किए गए थे। यदि कोई राज्य पहले से सेट किए गए राज्य पर निर्भर करता है, तो यह अपडाउन फ़ंक्शन के साथ किया जाना चाहिए ,

यदि आपको पिछली स्थिति के आधार पर राज्य को सेट करने की आवश्यकता है, तो नीचे updater तर्क के बारे में पढ़ें।

<...>

अपडेटर फ़ंक्शन द्वारा प्राप्त किए गए दोनों राज्य और प्रॉप्स को अद्यतित होने की गारंटी है। अद्यतनकर्ता का उत्पादन उथले रूप से राज्य में विलय कर दिया गया है।

setCount एक उदाहरण नहीं हो सकता है क्योंकि इसका उद्देश्य स्पष्ट नहीं है, लेकिन updater फ़ंक्शन के लिए यह मामला है:

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

यह 1: 1 से हुक तक अनुवादित होता है, इस अपवाद के साथ कि कॉलबैक के रूप में उपयोग किए जाने वाले फ़ंक्शन को बेहतर रूप से याद किया जाना चाहिए:

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

Question 3

जैसा कि दूसरों ने उल्लेख किया है, useStateकाम करता है - यहां बताया गया है कि कैसे mobx-react-lite इम्प्लीमेंट अपडेट करता है - आप कुछ ऐसा ही कर सकते हैं।

एक नया हुक परिभाषित करें, useForceUpdate-

import { useState, useCallback } from 'react'

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

और इसे एक घटक में उपयोग करें -

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

देखें https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts और https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver .ts

Question 4

आम तौर पर, आप किसी भी राज्य हैंडलिंग दृष्टिकोण का उपयोग कर सकते हैं जिसे आप एक अद्यतन ट्रिगर करना चाहते हैं।

टाइपस्क्रिप्ट के साथ

कोडैंडबॉक्स उदाहरण

useState

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

useReducer

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

कस्टम हुक के रूप में

इस तरह से आप जो भी दृष्टिकोण पसंद करते हैं उसे बस लपेटें

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

यह कैसे काम करता है?

" अपडेट को ट्रिगर करने के लिए " रिएक्ट इंजन को बताने का मतलब है कि कुछ मूल्य बदल गया है और यह आपके घटक को फिर से प्रस्तुत करना चाहिए।

[, setState]से useState()एक पैरामीटर की आवश्यकता है। हम एक ताजा वस्तु को बांधकर इससे छुटकारा पा लेते हैं {}।
() => ({})में useReducerएक डमी कम करने है कि रिटर्न एक ताजा वस्तु हर बार एक कार्रवाई भेजा जाता है।
{} (ताजा वस्तु) की आवश्यकता होती है ताकि यह राज्य में एक संदर्भ बदलकर एक अद्यतन को चालू कर सके।

पुनश्च: useStateबस useReducerआंतरिक रूप से लपेटता है । स्रोत

नोट: उपयोग के साथ .bind का उपयोग करते हुए रेंडरर्स के बीच फ़ंक्शन संदर्भ में परिवर्तन होता है। यह उपयोग करने के लिए संभव है इसे अंदर लपेटें जैसा कि पहले ही यहां बताया गया है , लेकिन फिर यह एक सेक्सी वन-लाइनर ™ नहीं होगा । Reducer संस्करण पहले से ही रेंडरर्स के बीच संदर्भ समानता रखता है । यह महत्वपूर्ण है यदि आप प्रॉप्स में फ़ोर्सअप फ़ंक्शन को पास करना चाहते हैं।

सादा जेएस

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

Question 5

@ मिन्हा के जवाब के लिए वैकल्पिक:

यह बहुत साफ हो सकता है useReducer:

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

उपयोग: forceUpdate()- क्लीनर बिना परम के

Question 6

आप बस उस तरह useState को परिभाषित कर सकते हैं:

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

और उपयोग: forceUpdate(n => !n)

उममीद है कि इससे मदद मिलेगी !

Question 7

प्रतिक्रिया के लिए हुक सामान्य प्रश्न हल करें forceUpdate:

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

काम करने का उदाहरण

कोड स्निपेट दिखाएं

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>

स्निपेट का विस्तार करें

Question 8

आपको अधिमानतः केवल आपका घटक राज्य और प्रॉप्स पर निर्भर होना चाहिए और यह अपेक्षा के अनुरूप काम करेगा, लेकिन यदि आपको घटक को फिर से प्रस्तुत करने के लिए मजबूर करने के लिए फ़ंक्शन की आवश्यकता है, तो आप useStateहुक का उपयोग कर सकते हैं और आवश्यकता होने पर फ़ंक्शन को कॉल कर सकते हैं।

उदाहरण

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>

स्निपेट का विस्तार करें

Question 9

सरल कोड

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

उपयोग:

forceUpdate();

Question 10

आप इस बात का फायदा उठाकर सामान्य हुक का उपयोग कर सकते हैं कि जेएसटी कोड में रिएलिटी बूलियन प्रिंट नहीं करता है।

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

Question 11

संभावित विकल्प केवल विशिष्ट घटक का उपयोग करके अद्यतन को बाध्य करना है key। घटक के प्रतिपादन के लिए कुंजी को अद्यतन करना (जो पहले अपडेट करने में विफल रहा)

उदाहरण के लिए:

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

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

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

Question 12

एक एकल पंक्ति में समाधान:

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

आप यहाँ उपयोग करने वाले के बारे में सीख सकते हैं। https://reactjs.org/docs/hooks-reference.html#usereducer

Question 13

एक पंक्ति समाधान:

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

useState मानों की एक जोड़ी लौटाता है: वर्तमान स्थिति और एक फ़ंक्शन जो इसे अपडेट करता है - राज्य और सेटर , यहां हम पुन: रेंडर करने के लिए केवल सेटर का उपयोग कर रहे हैं।

Question 14

मेरी भिन्नता किसी वस्तु के माध्यम forceUpdateसे नहीं counterबल्कि एक वस्तु के माध्यम से होती है:

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

क्योंकि {} !== {}हर बार।

Question 15

यह 3 बार घटकों के आधार पर रेंडर करेगा (समान तत्वों के साथ सरणियाँ बराबर नहीं हैं):

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

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

Question 16

react-tidyएक कस्टम हुक है कि सिर्फ करने के लिए बुलाया 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>
  )
}

इस हुक के बारे में और जानें

अस्वीकरण मैं इस पुस्तकालय का लेखक हूं।

Question 17

नियमित रिएक्ट क्लास आधारित घटकों के लिए, इस URL forceUpdateपर एपीआई के लिए रिएक्ट डॉक्स देखें । डॉक्स का उल्लेख है कि:

आम तौर पर आपको बलप्रयोग () के सभी उपयोगों से बचने की कोशिश करनी चाहिए और केवल इस से पढ़ा जाना चाहिए। यह और रेंडर में यह। ()

हालाँकि, यह डॉक्स में भी उल्लिखित है:

यदि आपकी रेंडर () विधि कुछ अन्य डेटा पर निर्भर करती है, तो आप React को बता सकते हैं कि कंपोनेंट को फोर्स यूपीडेट () कहकर पुन: रेंडरिंग की आवश्यकता है।

इसलिए, यद्यपि उपयोग करने के मामले forceUpdateदुर्लभ हो सकते हैं, और मैंने इसका कभी उपयोग नहीं किया है, हालांकि मैंने इसे कुछ विरासत कॉर्पोरेट परियोजनाओं में अन्य डेवलपर्स द्वारा उपयोग किया है जिन्हें मैंने काम किया है।

इसलिए, कार्यात्मक घटकों के लिए समान कार्यक्षमता के लिए, इस URL पर HOOKS के लिए रिएक्ट डॉक्स देखें । ऊपर दिए गए URL के अनुसार, कोई व्यक्ति “FunctReducer” हुक का उपयोग forceUpdateकार्यात्मक घटकों के लिए एक कार्यक्षमता प्रदान करने के लिए कर सकता है ।

एक कार्य कोड नमूना that does not use state or propsनीचे दिया गया है, जो इस URL पर CodeSandbox पर भी उपलब्ध है

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

नोट: इस URL पर यूज़स्ट्रेट हुक (उपयोगरेड्यूसर के बजाय) का उपयोग करते हुए एक वैकल्पिक दृष्टिकोण भी उपलब्ध है ।