ʻUseRef` এবং `createRef` এর মধ্যে পার্থক্য কী?

Question 1

আমি যখন হোঁচট খেয়েছিলাম তখন আমি হুকস ডকুমেন্টেশনটি দিয়ে যাচ্ছিলাম useRef।

তাদের উদাহরণের দিকে তাকিয়ে…

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

… এটির useRefসাথে প্রতিস্থাপন করা যেতে পারে বলে মনে হচ্ছে createRef।

function TextInputWithFocusButton() {
  const inputRef = createRef(); // what's the diff?
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

আমার কেন রেফার জন্য হুক লাগবে? কেন useRefবিদ্যমান?

Question 2

পার্থক্যটি হ'ল createRefসর্বদা একটি নতুন রেফ তৈরি করবে। শ্রেণিভিত্তিক উপাদানগুলিতে, আপনি সাধারণত নির্মাণের সময় উদাহরণ সংস্থায় রেফটি রাখবেন (যেমন this.input = createRef())। কোনও ফাংশন উপাদানটিতে আপনার এই বিকল্প নেই। useRefপ্রাথমিক রেন্ডারিংয়ের মতো প্রতিবার একই রেফ ফেরত দেওয়ার যত্ন নেয়।

এই দুটি ফাংশনের আচরণের পার্থক্য প্রদর্শনের জন্য এখানে একটি উদাহরণ অ্যাপ রয়েছে:

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

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

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

Question 3

createRefসর্বদা একটি নতুন রেফ ফেরত দেয়, যা আপনি সাধারণত শ্রেণীর উপাদানগুলির উদাহরণ হিসাবে ক্ষেত্র হিসাবে সঞ্চয় করেন। একই রেফuseRef ফেরৎ প্রত্যেক উপর একটি ক্রিয়ামূলক উপাদান দৃষ্টান্ত এর রেন্ডার। আপনি স্পষ্টভাবে কোথাও এটি সংরক্ষণ না করে সত্ত্বেও রেফার রাষ্ট্রটি রেন্ডারদের মধ্যে স্থির থাকতে দেয়।

আপনার দ্বিতীয় উদাহরণে, প্রতিটি রেন্ডার দিয়ে রেফ তৈরি করা হবে।

Question 4

tldr

এ refএকটি সরল জেএস বস্তু { current: <some value> }।

React.createRef()কোনও কারখানাটি একটি রেফ ফেরৎ { current: null }- কোনও জাদু জড়িত নয় ।

useRef(initValue)এছাড়াও একটি রেফার { current: initValue }মত অনুরূপ React.createRef()। তদ্ব্যতীত , এটি কোনও ফাংশন উপাদানটিতে একাধিক রেন্ডার জুড়ে এই রেফটিকে স্মরণীয় করে তোলে ।

এটি React.createRefশ্রেণীর উপাদানগুলিতে ব্যবহারের জন্য যথেষ্ট , কারণ রেফ অবজেক্টটি একটি উদাহরণ ভেরিয়েবলের জন্য বরাদ্দ করা হয়েছে , সুতরাং উপাদান এবং তার লাইফাইলটি জুড়ে অ্যাক্সেসযোগ্য:

this.myRef = React.createRef(); // stores ref in "mutable" this context (class)

useRef(null)মূলত সমতূল্য useState(React.createRef())[0] ¹ ।

¹ + এর `useRef`সাথে প্রতিস্থাপন করুন`useStatecreateRef`

নিম্নলিখিত টুইটগুলি আমার জন্য আলোকিত করে:

useRef()মূলত useState({current: initialValue })[0]।

tldrবিভাগটি থেকে অন্তর্দৃষ্টি দিয়ে , আমরা এখন আরও উপসংহারে পৌঁছাতে পারি:

useRef(null)মূলত useState(React.createRef())[0]।

কোডের উপরে "আপত্তি" useStateথেকে ফিরে আসা রেফারিকে অবিরত রাখতে React.createRef()।[0]কেবলমাত্র এর মান অংশটি নির্বাচন করে useState- [1]সেটার হবে।

useStateএর বিপরীতে পুনরায় রেন্ডার ঘটায় useRef। আরও আনুষ্ঠানিকভাবে, প্রতিক্রিয়াটি পুরানো এবং নতুন অবজেক্টের রেফারেন্সের সাথে তুলনা করে useState, যখন একটি নতুন মান তার সেটার পদ্ধতির মাধ্যমে সেট করা হয়। আমরা যদি পরিবর্তন ঘটান রাজ্যের useStateসরাসরি (সেটার আবাহন থেকে ভিন্ন), তার আচরণ বেশী বা কম হয়ে সমতুল্য করার useRef, যেমন কোন পুনরায় রেন্ডার আর আলোড়ন সৃষ্টি হয়:

// Example of mutaing object contained in useState directly
const [ref] = useState({ current: null })
ref.current = 42; // doesn't cause re-render

_{দ্রষ্টব্য: এটি করবেন না! useRefচাকাটি পুনরায় উদ্ভাবনের পরিবর্তে অনুকূলিত API ব্যবহার করুন । উপরের চিত্রণ উদ্দেশ্যে হয়।}

Question 5

কেবল একটি উদ্দেশ্য হাইলাইট করার জন্য:

createRefহিসাবে সহজ return {current: null}। এটি ref=বেশিরভাগ আধুনিক উপায়ে হ্যান্ডল করার একটি উপায় এবং এটি (স্ট্রিং-ভিত্তিক টুওও ওয়ে ম্যাজিক এবং কলব্যাক-ভিত্তিক দেখতে খুব ভার্জুয়াস দেখাচ্ছে)।

useRefরেন্ডারগুলির আগে কিছু ডেটা রাখে এবং এটিকে পরিবর্তন করলে পুনরায় রেন্ডার হয় না (যেমন useStateহয়)। তারা খুব কমই সম্পর্কিত হয়। ক্লাস-ভিত্তিক উপাদানগুলির জন্য আপনি যা কিছু আশা করেন তা উদাহরণস্বরূপ ক্ষেত্রগুলিতে যায় ( this.* =) মনে হয় প্রার্থী useRefকার্যকরী উপাদানগুলির সাথে প্রয়োগ করা হবে ।

বলুন useCallback(বেষ্টিত বর্গ পদ্ধতি হিসেবে কাজ করে this.handleClick = .....bind(this)) এবং পুনরায় প্রয়োগ করা হতে পারে (কিন্তু আমরা নিশ্চিত চাকা করা উচিত নয় পুনরায় উদ্ভাবিত) সঙ্গে useRef।

অন্য উদাহরণ হ'ল ডিওএম রেফ, সময়সীমা / অন্তর অন্তর্ভুক্ত আইডি, কোনও তৃতীয় পক্ষের লাইব্রেরির সনাক্তকারী বা রেফারেন্স।

পিএস আমি বিশ্বাস করি প্রতিক্রিয়া useRefএড়াতে প্রতিক্রিয়া দল বিভিন্ন নামকরণের জন্য আরও ভাল পছন্দ করেছে createRef। হতে পারে useAndKeepবা এমনকি usePermanent।

Question 6

অন্যের উত্তরগুলির জন্য আরেকটি তবে গুরুত্বপূর্ণ সংযোজন।

আপনি এর জন্য একটি নতুন মান সেট করতে পারবেন না createRef। তবে আপনি পারেন useRef।

const ur = useRef();
const cr = createRef();

ur.current = 10; // you can do it, and value is set
cr.current = 10; // you can, but it's no good, it will not change it

ʻUseRef` এবং `createRef` এর মধ্যে পার্থক্য কী?

tldr

1 + এর useRefসাথে প্রতিস্থাপন করুনuseStatecreateRef

¹ + এর `useRef`সাথে প্রতিস্থাপন করুন`useStatecreateRef`