আমি কীভাবে উপাদানগুলিকে প্রতিক্রিয়াতে হুকের সাথে পুনরায় রেন্ডার করতে বাধ্য করব?

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

মূলত আমরা নীচের উদাহরণের মতো শ্রেণীবদ্ধ উপাদানগুলিতে প্রতিক্রিয়াটি তত্ক্ষণাত উপাদানটিকে পুনরায় রেন্ডার করতে বাধ্য করার জন্য এটি.ফোর্স আপডেট () পদ্ধতিটি ব্যবহার করি example

    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, যেহেতু useStateব্যবহার useReducerঅভ্যন্তরীণভাবে :

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

forceUpdateশুধুমাত্র সাধারণ পরীক্ষায় বা অন্যান্য বকেয়া ক্ষেত্রে ব্যবহার করা হয় না। এই পরিস্থিতিটি আরও প্রচলিত উপায়ে সমাধান করা যেতে পারে।

setCountউৎপন্ন ব্যবহৃত একটি উদাহরণ forceUpdate, setStateকর্মক্ষমতা কারণে অ্যাসিঙ্ক্রোনাস এবং সমকালীন হতে রাষ্ট্র আপডেট সঠিকভাবে সম্পন্ন করা হয় নি শুধু কারণ বাধ্য করা উচিত নয়। যদি কোনও রাজ্য পূর্ব নির্ধারিত রাজ্যের উপর নির্ভর করে তবে এটি আপডেটের ফাংশন দিয়ে করা উচিত ,

আপনি যদি পূর্ববর্তী রাজ্যের উপর ভিত্তি করে রাজ্যটি সেট করতে চান তবে নীচে আপডেটের যুক্তি সম্পর্কে পড়ুন।

<...>

আপডেটেটর ফাংশন দ্বারা প্রাপ্ত রাষ্ট্র এবং প্রপস উভয়ই আপ টু ডেট হওয়ার গ্যারান্টিযুক্ত। আপডেটেটরের আউটপুট অগভীরভাবে রাষ্ট্রের সাথে একত্রিত হয়।

setCount উদাহরণস্বরূপ উদাহরণ নাও হতে পারে কারণ এর উদ্দেশ্যটি অস্পষ্ট তবে এটি আপডেটেটার ফাংশনের ক্ষেত্রে:

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কাজ করে - এখানে মোব্যাক্স-রিঅ্যাক্ট-লাইট আপডেটগুলি কীভাবে প্রয়োগ করে - আপনিও তেমন কিছু করতে পারেন।

একটি নতুন হুক সংজ্ঞায়িত করুন, 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

সাধারণত, আপনি কোনও আপডেট ট্রিগার করতে চান এমন কোনও রাষ্ট্র পরিচালনার পদ্ধতি ব্যবহার করতে পারেন।

টাইপস্ক্রিপ্ট সহ

কোডস্যান্ডবক্স উদাহরণ

ইউজ স্টেট

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

ব্যবহারকারক

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

কাস্টম হুক হিসাবে

আপনি যেভাবে পছন্দ পছন্দ করেন তা কেবল মোড়ানো করুন

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

এটি কিভাবে কাজ করে?

" একটি আপডেট ট্রিগার করা " এর অর্থ প্রতিক্রিয়া ইঞ্জিনকে বোঝানো যে কিছু মান পরিবর্তন হয়েছে এবং এটি আপনার উপাদানটি পুনরায় রেন্ডার করা উচিত।

[, setState]থেকে useState()একটি পরামিতি প্রয়োজন। আমরা তাজা বস্তুকে আবদ্ধ করে এ থেকে মুক্তি পাই {}।
() => ({})ইন useReducerহ'ল একটি ডামি রিডিউসার যা প্রতিবার কোনও ক্রিয়া প্রেরণ করা হওয়ার সাথে সাথে একটি তাজা বস্তু ফেরত দেয়।
{} (তাজা বস্তু) প্রয়োজনীয় যাতে এটি রাজ্যে একটি রেফারেন্স পরিবর্তন করে একটি আপডেট ট্রিগার করে।

পিএস: useStateকেবল useReducerঅভ্যন্তরীণভাবে মোড়ানো । সূত্র

দ্রষ্টব্য: ইউজস্টেটের সাথে .bind ব্যবহারের ফলে রেন্ডারগুলির মধ্যে ফাংশন রেফারেন্সের পরিবর্তন ঘটে। এটা তোলে useCallback ভিতরে এটি মোড়ানো হিসেবে ইতিমধ্যে সম্ভব এখানে ব্যাখ্যা , কিন্তু তারপর এটি একটি হবে না সেক্সি এক-লাইনের ™ । 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

আপনি সহজেই এর মতো স্টেটটি সংজ্ঞায়িত করতে পারেন:

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

এবং ব্যবহার: forceUpdate(n => !n)

এই সাহায্য আশা করি!

Question 7

আপনার কেবলমাত্র আপনার উপাদানটি রাষ্ট্র এবং প্রপসের উপর নির্ভরশীল হওয়া উচিত এবং এটি প্রত্যাশার মতো কাজ করবে, তবে উপাদানটি পুনরায় রেন্ডার জন্য আপনার যদি সত্যিই কোনও ফাংশন প্রয়োজন হয়, আপনি 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 8

প্রতিক্রিয়া হুক এফএকিউ এর জন্য সরকারী সমাধান 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 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-references.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

নিয়মিত প্রতিক্রিয়া শ্রেণিভিত্তিক উপাদানগুলির জন্য, এই URL forceUpdateএ এপিআইয়ের জন্য প্রতিক্রিয়া ডক্সকে দেখুন refer দস্তাবেজগুলি উল্লেখ করেছে:

সাধারণত আপনার ফোর্স আপডেট () এর সমস্ত ব্যবহার এড়াতে চেষ্টা করা উচিত এবং কেবল এটি থেকে পড়া উচিত rops

তবে এটি ডক্সেও উল্লেখ করা হয়েছে যে:

যদি আপনার রেন্ডার () পদ্ধতিটি অন্য কোনও ডেটার উপর নির্ভর করে, আপনি প্রতিক্রিয়াটি বলতে পারেন যে ফোর্সআপেড () কল করে উপাদানটির পুনরায় রেন্ডারিং দরকার।

সুতরাং, যদিও ব্যবহারের ক্ষেত্রে ব্যবহারের ঘটনা forceUpdateবিরল হতে পারে, এবং আমি এটি কখনও ব্যবহার করি নি, তবে আমি এটি দেখেছি যে আমি অন্য কয়েকটি বিকাশকারী কর্পোরেট প্রকল্পগুলিতে কাজ করেছি যা অন্যান্য কর্পোরেট প্রকল্পগুলিতে এটি ব্যবহার করেছে।

সুতরাং, কার্যকরী উপাদানগুলির সমতুল্য কার্যকারিতার জন্য, এই ইউআরএলে HOOKS এর জন্য প্রতিক্রিয়া ডক্সকে দেখুন । উপরের ইউআরএল অনুসারে, forceUpdateফাংশনাল উপাদানগুলির জন্য কার্যকারিতা সরবরাহ করতে কেউ "UseReducer" হুক ব্যবহার করতে পারেন ।

একটি ওয়ার্কিং কোড নমুনা that does not use state or propsনীচে সরবরাহ করা হয়েছে, যা এই ইউআরএলে কোডস্যান্ডবক্সেও উপলব্ধ

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

দ্রষ্টব্য: ইউএসস্টেট হুক (ইউজাররেডুসারের পরিবর্তে) ব্যবহার করে একটি বিকল্প পদ্ধতিও এই ইউআরএলে উপলব্ধ ।

Question 17

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

এই হুক সম্পর্কে আরও জানুন

দাবি অস্বীকার আমি এই গ্রন্থাগারের লেখক।