reactjs - আপনি সেটস্টেট কল না করে কোনও প্রতিক্রিয়া উপাদানকে পুনরায় রেন্ডার করতে বাধ্য করতে পারেন?




react-jsx (12)

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

শীর্ষ-স্তরের React.render এটি সম্ভব হয়েছে, তবে কোনও উপাদানগুলির মধ্যে এটি কাজ করে না (যা render পদ্ধতিটি কেবল কোনও বস্তু React.render বলে কিছুটা বোঝায়)।

এখানে একটি কোড উদাহরণ:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

অভ্যন্তরীণভাবে বোতামটি ক্লিক করা this.render() , কিন্তু এটি আসলে রেন্ডারিংয়ের কারণ হয় না (আপনি {Math.random()} দেখতে পারেন কারণ {Math.random()} by দ্বারা নির্মিত পাঠ্যটি পরিবর্তন হয় না)। যাইহোক, আমি যদি this.setState() পরিবর্তে কেবল this.setState() কল করি তবে এটি ঠিক আছে।

সুতরাং আমি আমার প্রশ্নটি অনুমান করি: প্রতিক্রিয়া দেওয়ার জন্য প্রতিক্রিয়াগুলির উপাদানগুলির কি রাষ্ট্র থাকা দরকার? রাষ্ট্র পরিবর্তন না করে উপাদানটিকে চাহিদার আপডেট করতে বাধ্য করার কোনও উপায় আছে কি?


সুতরাং আমি আমার প্রশ্নটি অনুমান করি: প্রতিক্রিয়া দেওয়ার জন্য প্রতিক্রিয়াগুলির উপাদানগুলির কি রাষ্ট্র থাকা দরকার? রাষ্ট্র পরিবর্তন না করে উপাদানটিকে চাহিদার আপডেট করতে বাধ্য করার কোনও উপায় আছে কি?

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

যদি আপনাকে ম্যানুয়ালি জোর করে পুনরায় রেন্ডার করতে হয় তবে আপনি অবশ্যই সঠিক কিছু করছেন না।


বাইক স্টোর পরিবর্তন করে এইচওসি ব্যবহার করে

এইচওসি (উচ্চতর অর্ডার উপাদান) প্যাটার্নটি ব্যবহার করে আপনি আপনার প্রতিক্রিয়া উপাদানগুলি মোড়ানো করতে পারেন এবং আপনার স্টোরগুলি পরিবর্তিত হলে স্বয়ংক্রিয় আপডেট পেতে পারে। এটি একটি কাঠামো ছাড়াই খুব হালকা ওজনের পদ্ধতির।

স্টোর এইচওসি হ্যান্ডেল স্টোর আপডেটগুলি

import React, { Component } from 'react'

export default function(/* store1, store2, store3... */) {
  const storeArgs = Array.prototype.slice.call(arguments)
  return function(WrappedComponent) {
    return class WithStore extends Component {
      constructor(props) {
        super(props)
        this.state = {
          lastUpdated: Date.now()
        }
        this.stores = storeArgs
      }

      _onChange = () => {
        this.setState({ lastUpdated: Date.now() })
      }

      componentWillMount = () => {
        this.stores && this.stores.forEach(store => {
          // each store has a common change event to subscribe to
          store.on('change', this._onChange)
        })
      }

      componentWillUnmount = () => {
        this.stores && this.stores.forEach(store => {
          store.off('change', this._onChange)
        })
      }

      render() {
        return <WrappedComponent 
                 lastUpdated={this.state.lastUpdated}
                 {...this.props}  />
      }
    }
  }
}

কিভাবে ব্যবহার করে

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import withStores from './withStores'
import userStore from './stores/users'

class MyView {
  _increaseUserCount = () => {
    userStore.setState({ userCount: userStore.state.count + 1 })
  }

  render() {
    return (
      <View>
        <Text>User count: {userStore.state.count}</Text>
        <Button
          title="Increase User Count"
          onPress={this._increaseUserCount}
        />
      </View>
    )
  }
}

return withStores(userStore)(MyView)

সাধারণ স্টোর শ্রেণীর উদাহরণ

var ee = require('event-emitter')
export default class Store {
  constructor() {
    this._state = {}
    this._eventEmitter = ee({})
  }
  get state() {
    return this._state
  }
  setState(newState) {
    this._state = {...this._state, ...newState}
    this._eventEmitter.emit('change')
  }
  on(ev, fn) {
    this._eventEmitter.on(ev, fn)
  }
  off(ev, fn) {
    this._eventEmitter.off(ev, fn)
  }
}

একক হিসাবে স্টোর উদাহরণ

import Store from './Store'

const myStore = new Store()
export default myStore

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

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


ES6 - আমি একটি উদাহরণ অন্তর্ভুক্ত করছি, যা আমার জন্য সহায়ক ছিল:

একটি "সংক্ষিপ্ত যদি বিবৃতি" তে আপনি এইভাবে খালি ফাংশনটি পাস করতে পারেন:

isReady ? ()=>{} : onClick

এটি সবচেয়ে সংক্ষিপ্ত পদ্ধতির বলে মনে হচ্ছে।

()=>{}


আপনি আরও বিশদ চেক ( forceUpdate() ) এর জন্য ফোর্সআপেট () ব্যবহার করতে পারেন।


আপনি এটি বেশ কয়েকটি উপায়ে করতে পারেন:

1. forceUpdate() পদ্ধতিটি ব্যবহার করুন:

forceUpdate() পদ্ধতিটি ব্যবহার করার সময় এমন কিছু forceUpdate() ঘটতে পারে। একটি উদাহরণ হ'ল এটি shouldComponentUpdate() পদ্ধতিটিকে উপেক্ষা করে এবং shouldComponentUpdate() পুনরায় রেন্ডার করবে shouldComponentUpdate() এ কারণে ফোর্সআপডেট () ব্যবহার করা যখন সম্ভব হয় এড়ানো উচিত।

২. সেট setState() পদ্ধতিতে এই setState() পাস করা

নিম্নলিখিত কোডের লাইনটি পূর্ববর্তী উদাহরণ সহ সমস্যাটি কাটিয়ে উঠেছে:

this.setState(this.state);

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


আপনি যে বর্ণনা দিচ্ছেন তা সম্পাদন করতে দয়া করে এটি চেষ্টা করুন forceফোর্স আপডেট ()।


আমরা নিচের মতো এটি.ফোর্স আপডেট () ব্যবহার করতে পারি।

       class MyComponent extends React.Component {



      handleButtonClick = ()=>{
          this.forceUpdate();
     }


 render() {

   return (
     <div>
      {Math.random()}
        <button  onClick={this.handleButtonClick}>
        Click me
        </button>
     </div>
    )
  }
}

 ReactDOM.render(<MyComponent /> , mountNode);

ডিওমে থাকা এলিমেন্ট 'ম্যাথআর্যান্ডম' অংশটি কেবলমাত্র আপডেট হয়ে যায় এমনকি আপনি যদি উপাদানটি পুনরায় রেন্ডার করতে সেটস্টেট ব্যবহার করেন।

এখানে সমস্ত উত্তর সঠিকভাবে বোঝার জন্য প্রশ্নের পরিপূরক হয়..আমরা সেটস্টেট ({}) ব্যবহার করে একটি উপাদান পুনরায় রেন্ডার করতে জানি ফোর্সআপেট () ব্যবহার করে।

উপরের কোডটি নীচে হিসাবে সেটস্টেট দিয়ে চলে।

 class MyComponent extends React.Component {



             handleButtonClick = ()=>{
                this.setState({ });
              }


        render() {
         return (
  <div>
    {Math.random()}
    <button  onClick={this.handleButtonClick}>
      Click me
    </button>
  </div>
)
  }
 }

ReactDOM.render(<MyComponent /> , mountNode);

গৃহীত উত্তরের ব্যাক-আপের জন্য আর একটি উত্তর :-)

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

এবং যদি আপনি এটি করেন তবে আপনি সম্ভবত জানেন যে পর্যবেক্ষণযোগ্য "অগ্নিকাণ্ডের" সময় আপনাকে পুনরায় রেন্ডার করতে হবে, এবং সুতরাং, আপনি forceUpdate() ব্যবহার করতে হবে এবং এটি আসলে এমন একটি প্লাস যা উচিত shouldComponentUpdate() এখানে জড়িত নয়।

মোবএক্স-এর মতো সরঞ্জামগুলি, যা একটি ও-পদ্ধতির গ্রহণ করে, এটি সত্যই পৃষ্ঠের নীচে এটি করে চলেছে (আসলে মোবএক্স কলগুলি render() সরাসরি)


প্রকৃতপক্ষে, forceUpdate() একমাত্র সঠিক সমাধান হিসাবে setState() অতিরিক্ত যুক্তি প্রয়োগ করা হয় বা যখন এটি সহজভাবে false ফেরত দেয় তখন পুনরায় রেন্ডারটিকে ট্রিগার করতে পারে না

forceUpdate ()

forceUpdate() কল করার ফলে forceUpdate() render() করা হবে, এড়িয়ে shouldComponentUpdate() কম্পোনেন্টস shouldComponentUpdate() forceUpdate()

setState ()

শর্তসাপেক্ষে রেন্ডারিং লজিকটি shouldComponentUpdate() প্রয়োগ না করা থাকলে shouldComponentUpdate() সর্বদা একটি রি-রেন্ডারকে ট্রিগার করে। more...

forceUpdate() উপাদানগুলির মাধ্যমে this.forceUpdate() আপনার উপাদানগুলির মধ্যে থেকে কল করা যেতে পারে this.forceUpdate()


ফোর্সআপডেট (), তবে প্রতিবারই আমি যখন কেউ কাউকে এটি সম্পর্কে কথা বলতে শুনেছি, আপনার সাথে এটি অনুসরণ করা হয়েছে কখনই এটি ব্যবহার করা উচিত নয়।


forceUpdate(); পদ্ধতিটি কাজ করবে তবে setState(); ব্যবহার করার পরামর্শ দেওয়া হচ্ছে setState();





react-jsx