অনক্লিক হ্যান্ডলারের পরামিতিগুলি পাস করার সর্বোত্তম উপায়

Question

এটি আমার উপাদান আমি ডিভের রুটটি পরিবর্তন করতে ইনলাইন তীর ফাংশনটি ব্যবহার করছি onClickতবে আমি জানি যে এটি কার্য সম্পাদনের দিক থেকে ভাল নয় is

1. ইনলাইন তীর ফাংশন

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={() => this.changeRoute("page1")}>1</div>
      <div onClick={() => this.changeRoute("page2")}>2</div>
    </>
  )
}

২. যদি আমি কনস্ট্রাক্টর বাইন্ডিং ব্যবহার করি তবে আমি কীভাবে প্রপস পাস করতে পারি?

constructor() {
  super(props)
  this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute}>1</div>
      <div onClick={this.changeRoute}>2</div>
    </>
  )
}

৩. যদি আমি তীর ফাংশনটি সরিয়ে ফেলি তবে ফাংশনটি রেন্ডারে নিজেই ডাকা হচ্ছে

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute("page1")}>1</div>
      <div onClick={this.changeRoute("page2")}>2</div>
    </>
  )
}

৪. যদি আমি ইনলাইন বাইন্ডিং ব্যবহার করি তবে এটি পারফরম্যান্সের সাথেও সেরা নয়

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute.bind(this, "page1")}>1</div>
      <div onClick={this.changeRoute.bind(this, "page2")}>2</div>
    </>
  )
}

তারপরে আমি কীভাবে সেরা পরামিতিগুলি পাস করার মাধ্যমে এগিয়ে যেতে পারি?

Comments

উল্লেখ্য যে, সম্ভবত এর মূল্য কারণ কেন ইনলাইন ব্যবহার তীর ফাংশন এখানে হয়, কারণ তীর ফাংশন একরকম চালানোর জন্য অন্তর্নিহিত ধীর হবে (তারা না "[একটি] কার্যকারিতা পদ ভালো উপায় নয়" না এবং কোনো ক্ষেত্রে ক্লিক হ্যান্ডলার হিসাবে খুব কমই সম্পাদিত কোনও ফাংশন কলের ব্যয় সম্পূর্ণরূপে তুচ্ছ but তবে কারণ প্রতিক্রিয়াটি প্রতিবার উপাদানটি পুনরায় রেন্ডার করার সাথে সাথে কার্যকারিতার নতুন উদাহরণ তৈরি করবে। ইনলাইন বাইন্ডিংয়ের ঠিক একই সমস্যা রয়েছে। এবং এটি সাধারণত যাইহোক ভাল হয়, যদি না উপাদানটি খুব ঘন ঘন পুনরায় রেন্ডার হয়।

— ইলমারি করোনেন

@ ইলমারিকারনেন বেশিরভাগ ক্ষেত্রে উপাদানগুলি ঘন ঘন পুনরায় রেন্ডার করে কারণ উপাদানগুলির ইনপুট ফিল্ড এবং টাইপিং থাকে এবং e.target.value সেট করে রাষ্ট্রের ফলে বারবার রেন্ডার হয় in

— ডার্ক নাইট

Answer 1

আপনি আপনার changeRouteহ্যান্ডলারটি সংজ্ঞায়িত করতে তীর ফাংশনটি ব্যবহার করতে পারেন ।

এটি হিসাবে পরিচিত Class field syntax। অফিসিয়াল প্রতিক্রিয়া ডক্সে এটি সম্পর্কে আরও এখানে ।

constructor() {
  super(props)
}

const changeRoute = (parameter) => (event) => {
    // business logic for route change.
}

তারপরে আপনি সরাসরি এই ফাংশনটি ব্যবহার করতে পারেন:

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}

বাঁধাইয়ের বিষয়ে আপনাকে চিন্তা করতে হবে না। তীর ফাংশনগুলি তাদের পিতামাতার উত্তরাধিকার সূত্রে প্রাপ্ত this।

Comments

@DarkKnight আপনার শেষ মন্তব্য ছিল executing on the go। আমার উত্তর যে প্রতিক্রিয়া হয়। আমি আপনাকে বলার চেষ্টা করছি যে আপনি ক্লিক করা হ্যান্ডলারটি execute on the goআপনি পোস্টের মতো হ্যান্ডলারের সংজ্ঞা দিলে তা হবে না ।

— উত্সব প্যাটেল

Pls এটি দেখুন

— ডার্ক নাইট

@ ডারকনাটাইট দয়া করে এই reactjs.org/docs/handling-events.html পড়ুন ক্লাস ফিল্ড সিনট্যাক্স অফিশিয়াল রিএ্যাক্ট ডকসের দ্বারা প্রস্তাবিত পদ্ধতিগুলির মধ্যে একটি।

— উত্সব প্যাটেল

ঠিক আছে আপনাকে ধন্যবাদ স্যার

— ডার্ক নাইট

Answer 2

আপনি আপনার ডিভিতে একটি ডেটা যুক্ত করতে পারেন:

<div data-id={1} onClick={this.changeRoute}>1</div>

তারপরে আপনি আপনার অন্লিক হ্যান্ডলারের সেই ডেটাটি পুনরুদ্ধার করতে পারেন:

onClick = (event) => {
  const id = event.currentTarget.dataset.id;
}

Comments

উজ্জ্বল পদ্ধতির!

— সর্বোচ্চ

হা হা হা ... করা যেতে পারে। কিন্তু প্রতিক্রিয়া কি নিজের চারপাশে কাজ করে না?

— ডার্ক নাইট

Answer 3

# 1 ঠিক আছে।

# 2 টিও 'জরিমানা', তবে আপনার প্রপস পাস করতে হবে, তখন রেন্ডার ফাংশনটি ঠিক 1 # এর মতো দেখাবে । আপনি bind'ডি ফাংশনটি কল করবেন , কারণ আপনি এটি নির্মাণকারীকে প্রতিস্থাপন করেছেন।

# 3 ঠিক ভুল, ফাংশন রেন্ডার সময় বলা হয়।

এবং প্রতিক্রিয়ার ডক্স থেকে # 4 সম্পর্কিত

এই ধরণের পারফরম্যান্স সমস্যা এড়াতে আমরা সাধারণত কনস্ট্রাক্টরকে বাঁধাই বা ক্লাস ফিল্ড সিনট্যাক্স ব্যবহার করার পরামর্শ দিই।

আপনার কার্যকারিতাটি যখন তার শিশু উপাদানগুলিতে ব্যবহৃত হয় তখন এটি পারফরম্যান্স পেনাল্টির কারণ হয়ে থাকে এবং এতে শিশু উপাদানগুলি পুনরায় রেন্ডার হতে পারে (এটি আপনার ক্ষেত্রে নয়)। সুতরাং আপনার # 4 করা উচিত নয় ।

Answer 4

বর্তমানে আপনার ইভেন্ট হ্যান্ডলারটি হুকটিতে মোড়ানো হ'ল সর্বোত্তম উপায় হ'ল useCallbackএটি প্রতিবার যখন রেন্ডার বলা হয় তখন আপনার হ্যান্ডলার ফাংশনটি তৈরি হতে বাধা দেয়।

import React, { useCallback } from 'react'

const MyComponent = ({ changeRoute }) => {
  const eventHandler = useCallback(() => {
    changeRoute('page1')
  }, [changeRoute])

  return (
    <div onClick={eventHandler}>1</div>
  )
}

আরও তথ্যের জন্য পরীক্ষা করুন - কলব্যাক ডক্স ব্যবহার করুন

Comments

ওপি কোনও শ্রেণীর উপাদান ব্যবহার করছে বলে মনে হবে, যেখানে আপনি হুক ব্যবহার করতে পারবেন না।

— টিজে ক্রাউডার

আমি আশা করি আমার উত্তর তাকে আরও ভালভাবে বুঝতে সাহায্য করবে

— আলেহ এটসমান