কিভাবে অগভীর কাজ প্রতিক্রিয়া মধ্যে তুলনা করে

Question 1

ইন এই ডকুমেন্টেশন প্রতিক্রিয়া, এটি বলা হয় যে

shallowCompare বর্তমান প্রপস এবং নেক্সটপ্রপস অবজেক্টগুলির পাশাপাশি বর্তমান অবস্থা এবং নেক্সটস্টেট অবজেক্টগুলিতে অগভীর সমতা পরীক্ষা করে।

আমি যে জিনিসটি বুঝতে অক্ষম তা হ'ল এটি যদি অল্প মাত্রায় বস্তুর তুলনা করে তবে কম্পোনেন্ট আপডেট পদ্ধতিটি সর্বদা সত্য হিসাবে ফিরে আসবে

আমাদের রাজ্যগুলিকে পরিবর্তন করা উচিত নয়।

এবং যদি আমরা রাজ্যগুলিকে পরিবর্তন না করি তবে তুলনাটি সর্বদা মিথ্যা বলে প্রত্যাবর্তন করবে এবং তাই উচিত কম্পোনেন্ট আপডেটটি সর্বদা সত্য ফিরে আসবে। এটি কীভাবে কাজ করছে এবং পারফরম্যান্স বাড়ানোর জন্য আমরা কীভাবে এটি ওভাররাইড করব তা নিয়ে আমি বিভ্রান্ত am

Question 2

অগভীর তুলনা সমতার জন্য পরীক্ষা করে। স্কেলার মানগুলি (সংখ্যা, স্ট্রিং) তুলনা করার সময় এটি তাদের মানগুলির সাথে তুলনা করে। বস্তুর তুলনা করার সময়, এটি তাদের বৈশিষ্ট্যগুলির তুলনা করে না - কেবল তাদের উল্লেখগুলি তুলনা করা হয় (উদাহরণস্বরূপ "তারা কি একই বস্তুর দিকে নির্দেশ করে?)

আসুন আকৃতি নিম্নলিখিত বিবেচনা userবস্তুর

user = {
  name: "John",
  surname: "Doe"
}

উদাহরণ 1:

const user = this.state.user;
user.name = "Jane";

console.log(user === this.state.user); // true

লক্ষ্য করুন আপনি ব্যবহারকারীর নাম পরিবর্তন করেছেন। এমনকি এই পরিবর্তনের সাথে বস্তু সমান। তারা রেফারেন্স ঠিক একই।

উদাহরণ 2:

const user = clone(this.state.user);
console.log(user === this.state.user); // false

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

ক্লোন ফাংশনটি এটি দেখতে (ES6 সিনট্যাক্স) হিসাবে দেখতে পারে

const clone = obj => Object.assign({}, ...obj);

অগভীর তুলনা পরিবর্তনগুলি সনাক্ত করার কার্যকর উপায়। এটি আশা করে যে আপনি ডেটা পরিবর্তন করবেন না।

Question 3

অগভীর তুলনা হয় যখন তুলনামূলকভাবে বস্তুর বৈশিষ্ট্যগুলি "===" বা কঠোর সাম্য ব্যবহার করে সম্পন্ন করা হয় এবং বৈশিষ্ট্যের আরও গভীর তুলনা পরিচালনা করবে না। যেমন

// a simple implementation of the shallowCompare.
// only compares the first level properties and hence shallow.
// state updates(theoretically) if this function returns true.
function shallowCompare(newObj, prevObj){
    for (key in newObj){
        if(newObj[key] !== prevObj[key]) return true;
    }
    return false;
}
// 
var game_item = {
    game: "football",
    first_world_cup: "1930",
    teams: {
         North_America: 1,
         South_America: 4,
         Europe: 8 
    }
}
// Case 1:
// if this be the object passed to setState
var updated_game_item1 = {
    game: "football",
    first_world_cup: "1930",
    teams: {
         North_America: 1,
         South_America: 4,
         Europe: 8 
    }
}
shallowCompare(updated_game_item1, game_item); // true - meaning the state
                                               // will update.

যদিও উভয় বস্তু একইরূপে প্রদর্শিত হয়, game_item.teamsতবে একই রেফারেন্স নয় updated_game_item.teams। ২ টি অবজেক্ট একই হওয়ার জন্য তাদের একই জিনিসকে নির্দেশ করা উচিত। এইভাবে রাজ্যে এই ফলাফলগুলি আপডেট হতে মূল্যায়ন করা হচ্ছে

// Case 2:
// if this be the object passed to setState
var updated_game_item2 = {
    game: "football",
    first_world_cup: "1930",
    teams: game_item.teams
}
shallowCompare(updated_game_item2, game_item); // false - meaning the state
                                               // will not update.

এবার নতুন এবং পুরাতন অবজেক্টের টিমের সম্পত্তি একই বস্তুর দিকে নির্দেশ করার কারণে এই সম্পত্তিটির প্রত্যেকটি যথার্থ তুলনার জন্য সত্য ফিরে আসে।

// Case 3:
// if this be the object passed to setState
var updated_game_item3 = {
    first_world_cup: 1930
}
shallowCompare(updated_game_item3, game_item); // true - will update

updated_game_item3.first_world_cupসম্পত্তি ব্যর্থ 1930 যেমন কঠোর মূল্যায়ন একটি সংখ্যা থাকাকালীন game_item.first_world_cupএকটি পংক্তি। তুলনাটি আলগা হলে (==) এটি পাস হয়ে যেত। তবুও এর ফলে রাষ্ট্রীয় আপডেটও আসবে।

অতিরিক্ত নোট:

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

Question 4

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

Question 5

এছাড়াও আছে উত্তরাধিকার ব্যাখ্যা প্রতিক্রিয়া তুলনা অগভীর এর:

shallowCompare বর্তমান প্রপস এবং নেক্সটপ্রপস অবজেক্টগুলির পাশাপাশি বর্তমান অবস্থা এবং নেক্সটস্টেট অবজেক্টগুলিতে অগভীর সমতা পরীক্ষা করে।

এটি প্রতিটি বস্তুর কীগুলির মানগুলি সমানভাবে সমান না হলে বস্তুগুলির তুলনা করা হচ্ছে এবং সত্যটি ফিরে আসার কীগুলিতে পুনরাবৃত্তি করে এটি করে।

ইউপিডি : বর্তমান ডকুমেন্টেশন অগভীর তুলনা সম্পর্কে বলে:

যদি আপনার রিঅ্যাক্ট উপাদানটির রেন্ডার () ফাংশন একই ফলাফলগুলিকে একই প্রসেস এবং স্থিতি দেয় তবে আপনি কিছু ক্ষেত্রে পারফরম্যান্স বৃদ্ধির জন্য React.PureComp घटक ব্যবহার করতে পারেন।

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

ইউপিডি 2: আমি মনে করি যে অগভীর তুলনা বোঝার জন্য পুনর্মিলনটিও গুরুত্বপূর্ণ থিম।

Question 6

উপরে @supi দ্বারা অগভীর সমান স্নিপেট ( https://stackoverflow.com/a/51343585/800608 ) যদি নেই prevObjএমন কী থাকে যা ব্যর্থ newObjহয়। এখানে এমন একটি বাস্তবায়ন যা এটিকে আমলে নেওয়া উচিত:

const shallowEqual = (objA, objB) => {
  if (!objA || !objB) {
    return objA === objB
  }
  return !Boolean(
    Object
      .keys(Object.assign({}, objA, objB))
      .find((key) => objA[key] !== objB[key])
  )
}

নোট করুন যে উপরেরগুলি পলিফিল ছাড়া এক্সপ্লোরারে কাজ করে না।

Question 7

উদাহরণ সহ একটি বাস্তবায়ন আছে।

const isObject = value => typeof value === 'object' && value !== null;

const compareObjects = (A, B) => {
  const keysA = Object.keys(A);
  const keysB = Object.keys(B);
 
  if (keysA.length !== keysB.length) {
    return false;
  }
 
  return !keysA.some(key => !B.hasOwnProperty(key) || A[key] !== B[key]);
};

const shallowEqual = (A, B) => {
  if (A === B) {
    return true;
  }
 
  if ([A, B].every(Number.isNaN)) {
    return true;
  }
  
  if (![A, B].every(isObject)) {
    return false;
  }
  
  return compareObjects(A, B);
};

const a = { field: 1 };
const b = { field: 2 };
const c = { field: { field: 1 } };
const d = { field: { field: 1 } };

console.log(shallowEqual(1, 1)); // true
console.log(shallowEqual(1, 2)); // false
console.log(shallowEqual(null, null)); // true
console.log(shallowEqual(NaN, NaN)); // true
console.log(shallowEqual([], [])); // true
console.log(shallowEqual([1], [2])); // false
console.log(shallowEqual({}, {})); // true
console.log(shallowEqual({}, a)); // false
console.log(shallowEqual(a, b)); // false
console.log(shallowEqual(a, c)); // false
console.log(shallowEqual(c, d)); // false

স্নিপেট প্রসারিত করুন