এই.সেটস্টেটটি একাধিকবার রিঅ্যাক্ট উপাদানটিতে ব্যবহার করার পরে কী ঘটে?

Question 1

আপনি যখন এই এক সেটটি একাধিক বার ব্যবহার করেন (আলোচনার জন্য 2 বার) তখন কী হবে তা আমি জানতে চেয়েছি। আমি ভেবেছিলাম যে উপাদানটি দু'বার রেন্ডার হবে তবে দৃশ্যত এটি একবারে রেন্ডার হয়েছে। আমার আর একটি প্রত্যাশা ছিল যে সেটস্টেটের জন্য সম্ভবত দ্বিতীয় কলটি প্রথমটির উপর দিয়ে চলে যাবে, তবে আপনি এটি অনুমান করেছিলেন - ভাল কাজ করেছেন worked

একটি জেএসফিডেলের লিঙ্ক

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

আপনি দেখতে পাবেন, 'রেন্ডার' বলছে এমন একটি সতর্কতা প্রতিটি রেন্ডারে পপ আপ হয়।

কেন এটি সঠিকভাবে কাজ করেছে তার জন্য আপনার কাছে কোনও ব্যাখ্যা আছে?

Question 2

ইভেন্ট হ্যান্ডলার এবং জীবনচক্র পদ্ধতিতে ঘটে এমন ব্যাচের স্টেট আপডেটগুলি প্রতিক্রিয়া জানায়। সুতরাং, আপনি যদি কোনও <div onClick />হ্যান্ডলারের একাধিক বার স্থিতি আপডেট করেন তবে প্রতিক্রিয়া পুনরায় রেন্ডারিংয়ের আগে ইভেন্ট হ্যান্ডলিংয়ের সমাপ্ত হওয়ার জন্য অপেক্ষা করবে।

পরিষ্কার হয়ে উঠতে, এটি কেবল বিক্রিয়া-নিয়ন্ত্রিত সিন্থেটিক ইভেন্ট হ্যান্ডলার এবং লাইফাইসাইকেল পদ্ধতিতে কাজ করে। রাষ্ট্রীয় আপডেটগুলি এজেএক্স এবং setTimeoutইভেন্ট হ্যান্ডলারগুলিতে ব্যাচ করা হয় না , উদাহরণস্বরূপ।

Question 3

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

উদাহরণস্বরূপ, নিম্নলিখিত কোডটি কেবলমাত্র 4 বার বলা হলেও রাষ্ট্রীয় মান বৈশিষ্ট্যটিকে 1 দ্বারা বাড়িয়ে তুলবে:

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

কোনও রাষ্ট্র আপডেট হওয়ার পরে এটি ব্যবহার করার জন্য, কলব্যাক আর্গুমেন্টে সমস্ত যুক্তি করুন:

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

সেটস্টেট (আপডেটেটর, [কলব্যাক]) পদ্ধতিটি পূর্ববর্তী রাষ্ট্র এবং বৈশিষ্ট্যের উপর ভিত্তি করে রাষ্ট্র আপডেট করার প্রথম যুক্তি হিসাবে একটি আপডেটেটর ফাংশন নিতে পারে। আপডেটেটর ফাংশনের রিটার্ন মানটি পূর্ববর্তী উপাদান রাষ্ট্রের সাথে অগভীরভাবে একত্রিত হবে। পদ্ধতিটি অযৌক্তিকভাবে রাজ্যকে আপডেট করে, সুতরাং একটি বিকল্প কলব্যাক রয়েছে যা একবার রাষ্ট্রের সম্পূর্ণ আপডেট শেষ হয়ে গেলে বলা হবে।

উদাহরণ:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

পূর্ববর্তী রাজ্যের উপর ভিত্তি করে কীভাবে রাষ্ট্র আপডেট করতে হবে তার একটি উদাহরণ এখানে রয়েছে:

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }