হুক্স প্রতিক্রিয়া করুন - ইউজস্টেট বনাম কেবল ভেরিয়েবল ব্যবহার করে

Question

প্রতিক্রিয়া হুকস আমাদের ব্যবহারের স্টেট বিকল্প দেয় এবং আমি সবসময় হুক বনাম শ্রেণি-রাজ্যের তুলনা দেখি। তবে হুকস এবং কিছু নিয়মিত ভেরিয়েবল সম্পর্কে কী বলা যায়?

উদাহরণ স্বরূপ,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

আমি হুক ব্যবহার করিনি, এবং এটি আমাকে একই ফলাফল দেবে:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

তাহলে ভিন্নতা কী? এই ক্ষেত্রে হুকগুলি আরও জটিল ব্যবহার করা হচ্ছে ... তবে কেন এটি ব্যবহার শুরু করবেন?

Comments

আপনি যদিও 2 টি ভিন্ন জিনিস তুলনা করছেন। হুক সহ দ্বিতীয় ফাংশনটিতে ডেটা আপডেট করার ক্ষমতা রয়েছে। প্রথমটি আসলে কিছু করছে না। আপনি সবেমাত্র এটি দিয়ে সূচনা করতে পারতেন let a = 1; return <div>{a}</div>এবং আপনি একই ফলাফল পাবেন।

— ইয়াথি

Answer 1

কারণ যদি আপনি useStateএটির দৃশ্যধারণ করে থাকেন তবে। ভেরিয়েবলগুলি নিজের দ্বারা কেবল মেমরিতে বিট পরিবর্তন করে এবং আপনার অ্যাপ্লিকেশনটির অবস্থা ভিউয়ের সাথে সিঙ্ক থেকে বেরিয়ে যেতে পারে।

এই উদাহরণগুলির সাথে তুলনা করুন:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

উভয় ক্ষেত্রেই aক্লিক পরিবর্তন হয় তবে আপনি যখন useStateভিউটি সঠিকভাবে ব্যবহার করেন তখনকার aবর্তমান মানটি প্রদর্শিত হয়।

Comments

ধন্যবাদ! সুতরাং যদি আমাকে ভিউটি রেন্ডার করার প্রয়োজন না হয় - তবে আমার ডেটা (প্রপস) কিছু অ্যারেতে সাজানোর একমাত্র উপায় - আমি 'লেট' ব্যবহার করতে পারি? এটি আমার পক্ষে কাজ করে, আমি কেবল এটির ঠিক আছে এবং গ্রহণযোগ্য তা জানতে চাই।

— মোশে নগর

@ মোশনেগর আপনি যদি প্রপস থেকে আপনার ডেটা সংগ্রহ করেন তবে ডেটা রাখার পরিবর্তে স্থানীয় ভেরিয়েবলগুলি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে কারণ উপাদানটি প্রপ চেঞ্জের ক্ষেত্রে যেভাবেই পুনরায় রেন্ডার করবে তাই ভিউটি ডেটার সাথে সুসংগত হবে। এগুলিকে রাজ্যে রাখার ফলে কেবল অপ্রয়োজনীয় রেন্ডার হতে পারে - প্রথমে প্রোপ পরিবর্তন, তারপরে রাষ্ট্র পরিবর্তন।

— মার্জেলিন

এই উত্তরটি দেখার আরও একটি উপায় হ'ল এটি মনে করা যায় যে দ্বিতীয় ক্ষেত্রে, পরিবর্তনশীলটি aনির্বাহ শেষ হওয়ার পরে আবর্জনা সংগ্রহ করা হবে, যখন প্রথমটির মধ্যে, এটির যেহেতু এটির useStateদাম রয়েছে তা সংরক্ষণ করা হবেa

— জোও মার্কোস গ্রিস

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

— টম

@ টম সাধারণ নিয়মটি উদ্ভূত রাজ্যের জন্য স্থানীয় যুদ্ধগুলি ব্যবহার করা হয়। অন্য যে কোনও কিছুর জন্য useRef(আপনি যদি পুনরায় রেন্ডার করতে না চান) বা useState(আপনি যদি পুনঃনির্ধারণ করতে চান) ব্যবহার করুন। টাইমারগুলির ক্ষেত্রে, যেমন এটি পার্শ্ব প্রতিক্রিয়া, সেগুলি useEffectহুক দিয়ে শুরু করা উচিত । আপনি যদি timerIdকেবল সাফাইয়ের উদ্দেশ্যে চান তবে আপনি এটি হ্যান্ডলারের স্থানীয় ভেরিয়েবলে রাখতে পারেন । আপনি যদি উপাদানটির অন্য জায়গা থেকে টাইমার সাফ করতে সক্ষম হতে চান তবে আপনার ব্যবহার করা উচিত useRef। timerIdএকটি উপাদান এর স্থানীয় ভেরিয়েবল সংরক্ষণ করা একটি ভুল হতে হবে যেহেতু প্রতিটি রেন্ডারে স্থানীয় ওয়ার্স "রিসেট" থাকে।

— মার্জিলিন

Answer 2

আপডেটের স্থিতি পুনরায় রেন্ডার করতে উপাদানটিকে তৈরি করবে, তবে স্থানীয় মানগুলি তা নয়।

আপনার ক্ষেত্রে, আপনি এই উপাদানটি আপনার উপাদানটিতে উপস্থাপন করেছেন। তার অর্থ, যখন মানটি পরিবর্তন করা হয়, আপডেট হওয়া মানটি দেখানোর জন্য উপাদানটি পুনরায় রেন্ডার করা উচিত।

সুতরাং এটি useStateসাধারণ স্থানীয় মানের তুলনায় ব্যবহার করা ভাল ।

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 3

আপনার প্রথম উদাহরণটি কেবলমাত্র কাজ করে কারণ ডেটা মূলত কখনই পরিবর্তন হয় না। ব্যবহারের setStateপ্রবেশদ্বারটি হ'ল রাজ্যটি হ্যাঙ্গ হয়ে গেলে আপনার সম্পূর্ণ উপাদানটি রেন্ডার করে। সুতরাং যদি আপনার উদাহরণের জন্য কোনও প্রকারের রাজ্য পরিবর্তন বা পরিচালনার প্রয়োজন হয় তবে আপনি দ্রুত মূল্যবোধের প্রয়োজনীয়তা বুঝতে পারবেন এবং পরিবর্তনশীল মানটির সাথে ভিউটি আপডেট করার জন্য আপনাকে রাষ্ট্র এবং পুনঃনির্ধারণের প্রয়োজন হবে।

Answer 4

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

সমতুল্য

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

কি useStateরিটার্ন দুটি জিনিস:

1. নতুন রাষ্ট্র পরিবর্তনশীল
2. যে পরিবর্তনশীল জন্য সেটার

যদি আপনি কল করেন setA(1)আপনি কল this.setState({ a: 1 })এবং একটি রি-রেন্ডার ট্রিগার করবে ।

Answer 5

স্থানীয় পরিবর্তনকগুলি রূপান্তরিত হওয়ার পরে প্রতিটি রেন্ডার পুনরায় সেট করবে যেখানে রাষ্ট্র আপডেট করবে:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}