রিঅ্যাক্টে ইউজস্টেট () কী?

Question

আমি বর্তমানে প্রতিক্রিয়াতে হুক্স ধারণাটি শিখছি এবং নীচের উদাহরণটি বোঝার চেষ্টা করছি।

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

উপরের উদাহরণটি হ্যান্ডলারের ফাংশন প্যারামিটারেই কাউন্টারটিকে বাড়িয়ে তোলে। আমি যদি ইভেন্ট হ্যান্ডলার ফাংশনের অভ্যন্তরে কাউন্টের মানটি পরিবর্তন করতে চাই তবে কী হবে

নীচে উদাহরণ বিবেচনা করুন

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

Comments

কীভাবে useStateপ্রয়োগ করা হয় তা বুঝতে আপনি উত্স কোডটিও দেখতে পারেন । এখানে সংস্করণ 16.9 হিসাবে সংজ্ঞা দেওয়া আছে ।

— কেমচুরিয়ন

Answer 1

প্রতিক্রিয়া হুক একটি নতুন উপায় (এখনও বিকশিত হচ্ছে) যেমন প্রতিক্রিয়াগুলির মূল বৈশিষ্ট্যগুলি অ্যাক্সেস করার জন্য যেমন stateক্লাস ব্যবহার না করেই থাকে, উদাহরণস্বরূপ আপনি যদি onClickপ্রপ এ সরাসরি উল্লেখ না করে হ্যান্ডলারের কার্যক্রমে কোনও কাউন্টার বাড়িয়ে দিতে চান তবে আপনি যেমন কিছু করতে পারে:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

এবং অন ক্লিক করুন:

<button onClick={setCount}>
    Click me
</button>

আসুন দ্রুত এই লাইনে কী চলছে তা ব্যাখ্যা করুন:

const [count, setCounter] = useState(0);

useState(0)একটি টুপল ফেরত দেয় যেখানে প্রথম প্যারামিটারটি countকাউন্টারটির বর্তমান অবস্থা এবং setCounterএটিই সেই পদ্ধতি যা আমাদের কাউন্টারের অবস্থা আপডেট করতে দেয়। যে কোনও setCounterঅবস্থার আপডেট করার জন্য আমরা পদ্ধতিটি ব্যবহার করতে পারি count- এই ক্ষেত্রে আমরা এটি setCountফাংশনের অভ্যন্তরে ব্যবহার করছি যেখানে আমরা আরও বেশি কিছু করতে পারি; হুক্স সহ ধারণাটি হ'ল আমরা আমাদের কোডটিকে আরও কার্যকরী রাখতে এবং প্রয়োজন / প্রয়োজন না হলে শ্রেণিভিত্তিক উপাদানগুলি এড়াতে সক্ষম হয়েছি ।

আমি একাধিক উদাহরণ আঙ্গুলসমূহ সম্পর্কে একটি সম্পূর্ণ নিবন্ধ লিখেছিলেন যেমন (কাউন্টারে সহ) এই codepen , আমি ব্যবহার করা useState, useEffect, useContext, এবং কাস্টম আঙ্গুলসমূহ । এই উত্তরে হুকগুলি কীভাবে কাজ করে সে সম্পর্কে আমি আরও বিশদ পেতে পারি তবে ডকুমেন্টেশনটি রাজ্য হুক এবং অন্যান্য হুকের বিশদ বিবরণ দিয়ে একটি খুব ভাল কাজ করে , আশা করি এটি সহায়তা করবে।

আপডেট: হুকগুলি এখন আর কোনও প্রস্তাব নয় , যেহেতু ১.8.৮ সংস্করণ সেগুলি এখন ব্যবহারের জন্য উপলব্ধ, রিঅ্যাক্টের সাইটে একটি বিভাগ রয়েছে যা কিছু FAQ এর উত্তর দেয় ।

Comments

জাভাস্ক্রিপ্টে প্রযুক্তিগতভাবে কোনও

— দ্বিধাগুলির

ওয়েল, destructured নিয়োগ tuple মত ব্যবহার করা হয় stackoverflow.com/a/4513061/6335029

— NaveenDA

হুক অ্যাসিঙ্ক হয়? ব্যবহারের সময় setSomething, যদি আমি পরে somethingসরাসরি ব্যবহার করার চেষ্টা করি তবে মনে হয় এটির পুরানো মানটি এখনও রয়েছে ...

— বায়রন কোটসি

Answer 2

useState এটি বিল্ট-ইন প্রতিক্রিয়া হুকগুলির মধ্যে একটি available 0.16.7সংস্করণে ।

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

const [state, setState] = useState(initialState);

একটি রাষ্ট্রীয় মান এবং এটি আপডেট করার জন্য একটি ফাংশন প্রদান করে।

প্রাথমিক রেন্ডার চলাকালীন, ফেরত রাষ্ট্র (রাষ্ট্র) প্রথম আর্গুমেন্ট (ইনিশিয়াল স্টেট) হিসাবে পাস মান হিসাবে সমান।

স্টেট আপডেট করতে সেটস্টেট ফাংশন ব্যবহৃত হয়। এটি একটি নতুন রাষ্ট্রীয় মান গ্রহণ করে এবং উপাদানটির পুনরায় রেন্ডার করতে বাধ্য করে।

দয়া করে নোট করুন যে useStateরাষ্ট্র আপডেট করার জন্য হুক কলব্যাক উপাদানগুলির চেয়ে আলাদা আচরণ করেthis.setState । পার্থক্যটি দেখানোর জন্য আমি দুটি উদাহরণ প্রস্তুত করেছি।

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

setUserInfoকলব্যাক ব্যবহার করার সময় নতুন অবজেক্ট তৈরি করা হয়। লক্ষ্য করুন আমরা lastNameকী মানটি হারিয়েছি । আমরা ভিতরে ফাংশন পাস করতে পারে যে স্থির useState।

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

উদাহরণ দেখুন:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

শ্রেণীর উপাদানগুলিতে পাওয়া সেটস্টেট পদ্ধতির বিপরীতে, ইউজস্টেট স্বয়ংক্রিয়ভাবে আপডেট অবজেক্টগুলিকে মার্জ করে না। আপনি অবজেক্ট স্প্রেড সিনট্যাক্সের সাথে ফাংশন আপডেটার ফর্মটি একত্রিত করে এই আচরণটির প্রতিলিপি করতে পারেন:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

অফিসিয়াল ডকুমেন্টেশন সম্পর্কে useStateআরও তথ্যের জন্য দেখুন ।

Comments

উদাহরণ হিসাবে পরামিতি হিসাবে একটি ফাংশন যোগ করার জন্য ধন্যবাদ।

— জুনি ব্রোসাস

Answer 3

useStateহুকের বাক্য গঠনটি সোজা is

const [value, setValue] = useState(defaultValue)

আপনি যদি এই সিনট্যাক্সের সাথে পরিচিত না হন তবে এখানে যান ।

আমি আপনাকে ডকুমেন্টেশন পড়ার সুপারিশ করব .ভালো উদাহরণগুলির সাথে দুর্দান্ত ব্যাখ্যা রয়েছে।

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সংক্ষিপ্ত এবং পরিষ্কার, বাহ্যিক ভাল রেফারেন্স সহ।

— বারান

Answer 4

useStateপ্রতিক্রিয়া v16.8.0 এ উপলব্ধ হুকগুলির মধ্যে একটি। এটি মূলত আপনাকে আপনার অন্যথায় রাষ্ট্রহীন / কার্যকরী উপাদানগুলিকে এমন একটিতে পরিণত করতে দেয় যা তার নিজস্ব রাষ্ট্র থাকতে পারে।

খুব বেসিক স্তরে, এটি এভাবে ব্যবহার করা হয়:

const [isLoading, setLoading] = useState(true);

এরপরে আপনাকে setLoadingবুুলিয়ান মানটি পাস করার জন্য কল করতে দেয় । এটি "রাষ্ট্রীয়" কার্যকরী উপাদান থাকার একটি দুর্দান্ত উপায়।

Answer 5

useState()একটি প্রতিক্রিয়া হুক হয়। হুকগুলি ফাংশন উপাদানগুলির অভ্যন্তরে রাষ্ট্র এবং পরিবর্তনীয় ব্যবহার সম্ভব করে।

আপনি ক্লাসের ভিতরে হুক ব্যবহার করতে পারবেন না এমন সময় আপনি কোনও ক্লাসের সাথে আপনার ক্লাসের উপাদানটি মোড়ানো করতে পারেন এবং এটি থেকে হুক ব্যবহার করতে পারেন। শ্রেণি থেকে ফাংশন ফর্মে উপাদান স্থানান্তর করার জন্য এটি দুর্দান্ত সরঞ্জাম। এখানে একটি সম্পূর্ণ উদাহরণ:

এই উদাহরণের জন্য আমি একটি পাল্টা উপাদান ব্যবহার করব। এই হল:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

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

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

একই আচরণ, একই নাম এবং একই বৈশিষ্ট্য সহ এটি ঠিক একই উপাদান। এখন গণনা রাজ্যটিকে ফাংশন উপাদানটিতে তুলতে দিন। এটি এভাবেই চলে:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

নোট করুন যে পদ্ধতিটি incএখনও আছে, এটি কারও ক্ষতি করবে না, বাস্তবে এটি ডেড কোড। এই ধারণাটি, কেবল রাষ্ট্রকে উপরে তুলুন। একবার শেষ হয়ে গেলে আপনি ক্লাস উপাদানটি সরিয়ে ফেলতে পারেন:

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

যদিও এটি শ্রেণীর উপাদানগুলির অভ্যন্তরে হুকগুলি ব্যবহার সম্ভব করে তোলে, আমি আপনাকে উদাহরণস্বরূপ সুপারিশ করব না যদি আপনি যেমন উদাহরণস্বরূপ মাইগ্রেশন করেন তবে। ফাংশন এবং শ্রেণীর উপাদানগুলির মিশ্রণ রাজ্য পরিচালনকে গোলমাল করে দেবে। আশা করি এটা কাজে লাগবে

শুভেচ্ছান্তে

Answer 6

ইউজস্টেট () হ'ল বিল্ট-ইন রিঅ্যাক্ট হুক যা আপনাকে আপনার কার্যকরী উপাদানগুলিতে রাজ্যগুলি ব্যবহার করতে দেয়। 16.7 প্রতিক্রিয়া দেওয়ার আগে এটি সম্ভব ছিল না।

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

Answer 7

হুক একটি নতুন বৈশিষ্ট্য React v16.7.0-alpha useStateহ'ল "হুক"। useState()যেকোন ভেরিয়েবলের ডিফল্ট মান সেট করুন এবং ফাংশন উপাদান (পিউরকম্পোনেন্ট ফাংশন) এ পরিচালনা করুন। ex : const [count, setCount] = useState(0);গণনা 0 এর ডিফল্ট মান সেট করুন এবং setCountআপনি incrementবা decrementমানটি ব্যবহার করতে পারেন । onClick={() => setCount(count + 1)}গণনা মান বৃদ্ধি। ডক

Answer 8

ধন্যবাদ লোলসঙ্ক, আমি তাই করেছি

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

Answer 9

ইউজস্টেট এমন একটি হুক যা আপনাকে কার্যকরী উপাদানগুলিতে রাজ্য যুক্ত করতে দেয়। এটি একটি যুক্তি গ্রহণ করে যা রাষ্ট্রীয় সম্পত্তির প্রাথমিক মান এবং রাষ্ট্রীয় সম্পত্তির বর্তমান মূল্য এবং এমন একটি পদ্ধতি প্রদান করে যা সেই রাষ্ট্রের সম্পত্তি আপডেট করতে সক্ষম।
নিম্নলিখিতটি একটি সাধারণ উদাহরণ:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}

ইউজস্টেট রাজ্য ভেরিয়েবলের প্রাথমিক মান গ্রহণ করে যা এক্ষেত্রে শূন্য এবং এক জোড়া মান প্রদান করে। রাজ্যের বর্তমান মানকে গণনা বলা হয় এবং এমন একটি পদ্ধতি যা রাষ্ট্রের ভেরিয়েবল আপডেট করতে পারে সেট সেট হিসাবে তাকে বলা হয়।