প্রতিক্রিয়া বিকাশকারীদের জন্য আলো

1. ভূমিকা

লিট কি

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

আপনি কি শিখবেন

কিভাবে Lit এ বিভিন্ন প্রতিক্রিয়া ধারণা অনুবাদ করবেন যেমন:

• JSX এবং টেমপ্লেটিং
• উপাদান এবং প্রপস
• রাষ্ট্র ও জীবনচক্র
• হুকস
• শিশুরা
• Refs
• মধ্যস্থতাকারী রাষ্ট্র

আপনি কি নির্মাণ করবেন

এই কোডল্যাব শেষে রিঅ্যাক্ট কম্পোনেন্ট কনসেপ্টগুলোকে তাদের Lit এনালগে রূপান্তর করতে সক্ষম হবে।

আপনি কি প্রয়োজন হবে

• ক্রোম, সাফারি, ফায়ারফক্স বা এজ এর সর্বশেষ সংস্করণ।
• HTML, CSS, JavaScript এবং Chrome DevTools এর জ্ঞান।
• প্রতিক্রিয়ার জ্ঞান
• (উন্নত) আপনি যদি সেরা বিকাশের অভিজ্ঞতা চান তবে ভিএস কোড ডাউনলোড করুন। VS কোড এবং NPM- এর জন্য আপনার lit-plugin-এরও প্রয়োজন হবে।

প্রতিটি পৃথক পদক্ষেপ অনুসরণ করতে আগ্রহী নন? চারপাশে ঝাঁপ দাও কারণ বিভাগগুলিকে ক্রমানুসারে অনুসরণ করার প্রয়োজন নেই।

2. লিট বনাম প্রতিক্রিয়া

লিটের মূল ধারণা এবং ক্ষমতাগুলি বিভিন্ন উপায়ে প্রতিক্রিয়ার মতো, তবে লিটেরও কিছু মূল পার্থক্য এবং পার্থক্য রয়েছে:

এটা ছোট

লিট ছোট: এটি রিএক্ট + রিএক্টডোমের 40+ kb এর তুলনায় প্রায় 5kb মিনিফাইড এবং জিজিপ করা হয়েছে।

এটা দ্রুত

যে সকল পাবলিক বেঞ্চমার্কে Lit-এর টেমপ্লেটিং সিস্টেম, lit-html,কে React-এর VDOM-এর সাথে তুলনা করা হয়, সেখানে lit-html সবচেয়ে খারাপ ক্ষেত্রে প্রতিক্রিয়ার তুলনায় 8-10% দ্রুত এবং সাধারণ ব্যবহারের ক্ষেত্রে 50%+ দ্রুত বেরিয়ে আসে।

LitElement (Lit's কম্পোনেন্ট বেস ক্লাস) lit-html-এ একটি ন্যূনতম ওভারহেড যোগ করে, কিন্তু মেমরি ব্যবহার এবং মিথস্ক্রিয়া এবং স্টার্টআপ সময়ের মতো উপাদান বৈশিষ্ট্যগুলির তুলনা করার সময় প্রতিক্রিয়ার কার্যকারিতাকে 16-30% হারায় ।

নির্মাণের প্রয়োজন নেই

নতুন ব্রাউজার বৈশিষ্ট্য যেমন ES মডিউল এবং ট্যাগ করা টেমপ্লেট লিটারাল সহ, লিট চালানোর জন্য সংকলনের প্রয়োজন হয় না । এর মানে হল যে ডেভ এনভায়রনমেন্ট একটি স্ক্রিপ্ট ট্যাগ + একটি ব্রাউজার + একটি সার্ভারের সাথে সেট আপ করা যেতে পারে এবং আপনি আপ এবং রান করছেন৷

ES মডিউল এবং আধুনিক দিনের CDN যেমন স্কাইপ্যাক বা UNPKG এর সাথে, শুরু করার জন্য আপনার NPM এর প্রয়োজনও নাও হতে পারে!

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

ফ্রেমওয়ার্ক অজ্ঞেয়বাদী

লিটের উপাদানগুলি ওয়েব কম্পোনেন্ট নামক ওয়েব মানগুলির একটি সেট তৈরি করে। এর মানে হল Lit-এ একটি উপাদান তৈরি করা বর্তমান এবং ভবিষ্যতের কাঠামোতে কাজ করবে । যদি এটি HTML উপাদান সমর্থন করে, এটি ওয়েব উপাদান সমর্থন করে।

ফ্রেমওয়ার্ক ইন্টারপের একমাত্র সমস্যা হল যখন ফ্রেমওয়ার্কের DOM-এর জন্য সীমাবদ্ধ সমর্থন থাকে। রিঅ্যাক্ট এই ফ্রেমওয়ার্কগুলির মধ্যে একটি, তবে এটি রেফের মাধ্যমে পালানোর অনুমতি দেয় এবং রিঅ্যাক্টের রেফগুলি একটি ভাল বিকাশকারী অভিজ্ঞতা নয়।

লিট টিম @lit-labs/react নামক একটি পরীক্ষামূলক প্রকল্পে কাজ করছে যা স্বয়ংক্রিয়ভাবে আপনার Lit উপাদানগুলিকে পার্স করবে এবং একটি React র‍্যাপার তৈরি করবে যাতে আপনাকে refs ব্যবহার করতে না হয়।

উপরন্তু, কাস্টম উপাদানগুলি সর্বত্র আপনাকে দেখাবে কোন ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলি কাস্টম উপাদানগুলির সাথে সুন্দরভাবে কাজ করে!

প্রথম শ্রেণীর টাইপস্ক্রিপ্ট সমর্থন

যদিও জাভাস্ক্রিপ্টে আপনার সমস্ত লিট কোড লেখা সম্ভব, লিট টাইপস্ক্রিপ্টে লেখা হয় এবং লিট টিম সুপারিশ করে যে বিকাশকারীরাও টাইপস্ক্রিপ্ট ব্যবহার করুন!

লিট টিম লিট সম্প্রদায়ের সাথে কাজ করছে এমন প্রকল্পগুলি বজায় রাখতে সাহায্য করার জন্য যা টাইপস্ক্রিপ্ট টাইপ চেকিং এবং বুদ্ধিমত্তাকে লিট টেমপ্লেটের বিকাশ এবং lit-analyzer এবং lit-plugin দিয়ে সময় তৈরি করে।

দেব সরঞ্জাম ব্রাউজার মধ্যে নির্মিত হয়

লিট উপাদানগুলি DOM-এ শুধুমাত্র HTML উপাদান । এর মানে হল যে আপনার উপাদানগুলি পরিদর্শন করার জন্য, আপনাকে আপনার ব্রাউজারের জন্য কোনো সরঞ্জাম বা এক্সটেনশন ইনস্টল করতে হবে না ।

আপনি সহজভাবে dev টুল খুলতে পারেন, একটি উপাদান নির্বাচন করতে পারেন এবং এর বৈশিষ্ট্য বা অবস্থা অন্বেষণ করতে পারেন।

এটি সার্ভার সাইড রেন্ডারিং (SSR) মাথায় রেখে তৈরি করা হয়েছে

Lit 2 SSR সমর্থন মাথায় রেখে তৈরি করা হয়েছে। এই কোডল্যাবটি লেখার সময়, Lit টিম এখনও SSR টুলগুলিকে স্থিতিশীল আকারে প্রকাশ করতে পারেনি, কিন্তু Lit টিম ইতিমধ্যেই Google পণ্য জুড়ে সার্ভার সাইড রেন্ডার করা উপাদানগুলি স্থাপন করছে এবং প্রতিক্রিয়া অ্যাপ্লিকেশনগুলির মধ্যে SSR পরীক্ষা করেছে৷ লিট টিম শীঘ্রই GitHub-এ বাহ্যিকভাবে এই সরঞ্জামগুলি প্রকাশ করবে বলে আশা করছে।

এই সময়ের মধ্যে আপনি এখানে লিট টিমের অগ্রগতি সহ অনুসরণ করতে পারেন।

এটা কম কেনার

লিট ব্যবহার করার জন্য একটি উল্লেখযোগ্য প্রতিশ্রুতি প্রয়োজন হয় না! আপনি Lit এ উপাদানগুলি তৈরি করতে পারেন এবং সেগুলিকে আপনার বিদ্যমান প্রকল্পে যুক্ত করতে পারেন। আপনি যদি সেগুলি পছন্দ না করেন, তাহলে ওয়েব উপাদানগুলি অন্যান্য ফ্রেমওয়ার্কে কাজ করার কারণে আপনাকে একবারে পুরো অ্যাপটিকে রূপান্তর করতে হবে না !

আপনি কি লিটে একটি সম্পূর্ণ অ্যাপ তৈরি করেছেন এবং অন্য কিছুতে পরিবর্তন করতে চান? ঠিক আছে, তাহলে আপনি আপনার বর্তমান লিট অ্যাপ্লিকেশনটিকে আপনার নতুন কাঠামোর ভিতরে রাখতে পারেন এবং আপনি যা চান তা নতুন কাঠামোর উপাদানগুলিতে স্থানান্তর করতে পারেন।

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

3. সেট আপ করা এবং খেলার মাঠ অন্বেষণ করা

এই কোডল্যাবটি করার দুটি উপায় রয়েছে:

• আপনি ব্রাউজারে এটি সম্পূর্ণভাবে অনলাইনে করতে পারেন
• (উন্নত) আপনি VS কোড ব্যবহার করে আপনার স্থানীয় মেশিনে এটি করতে পারেন

কোড অ্যাক্সেস করা

কোডল্যাব জুড়ে এইরকম লিট খেলার মাঠের লিঙ্ক থাকবে:

কোড চেকপয়েন্ট

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

// before
import './my-file.js';
import 'lit';

// after
import './my-file.js';
import 'https://cdn.skypack.dev/lit';

এই চেকপয়েন্টগুলিকে প্রারম্ভিক পয়েন্ট হিসাবে ব্যবহার করে আপনি লিট খেলার মাঠে পুরো টিউটোরিয়ালটি করতে পারেন। আপনি যদি VS কোড ব্যবহার করেন, আপনি এই চেকপয়েন্টগুলি ব্যবহার করে যেকোনো ধাপের জন্য শুরুর কোড ডাউনলোড করতে পারেন, সেইসাথে আপনার কাজ পরীক্ষা করার জন্য সেগুলি ব্যবহার করতে পারেন৷

আলোকিত খেলার মাঠের UI অন্বেষণ করা হচ্ছে

লিট প্লেগ্রাউন্ড UI স্ক্রিনশট সেই বিভাগগুলিকে হাইলাইট করে যা আপনি এই কোডল্যাবে ব্যবহার করবেন।

1. ফাইল নির্বাচক। প্লাস বোতামটি নোট করুন...
2. ফাইল সম্পাদক।
3. কোড পূর্বরূপ।
4. রিলোড বোতাম।
5. ডাউনলোড বোতাম।

ভিএস কোড সেটআপ (উন্নত)

আপনি যদি এই কোডল্যাবটি সম্পূর্ণরূপে ব্রাউজারে চালাতে চান, তাহলে আপনি এই ধাপটি এড়িয়ে যেতে পারেন।

এই ভিএস কোড সেটআপ ব্যবহার করার সুবিধাগুলি এখানে রয়েছে:

• টেমপ্লেট টাইপ চেকিং
• টেমপ্লেট বুদ্ধিমত্তা এবং স্বয়ংসম্পূর্ণতা

আপনার যদি NPM, VS কোড ( লিট-প্লাগইন প্লাগইন সহ) ইতিমধ্যেই ইনস্টল করা থাকে এবং সেই পরিবেশটি কীভাবে ব্যবহার করতে হয় তা জানেন তবে আপনি নিম্নলিখিতগুলি করে এই প্রকল্পগুলি ডাউনলোড এবং শুরু করতে পারেন:

• ডাউনলোড বোতাম টিপুন
• একটি ডিরেক্টরিতে টার ফাইলের বিষয়বস্তু বের করুন
• (যদি TS) একটি দ্রুত tsconfig সেট আপ করে যা es মডিউল এবং es2015+ আউটপুট করে
• একটি ডেভ সার্ভার ইনস্টল করুন যা বেয়ার মডিউল স্পেসিফায়ারগুলিকে সমাধান করতে পারে (লিট টিম সুপারিশ করে @web/dev-server )
  • এখানে একটি উদাহরণ হল package.json
• dev সার্ভার চালান এবং আপনার ব্রাউজার খুলুন (যদি আপনি @web/dev-server ব্যবহার করেন তাহলে আপনি npx web-dev-server --node-resolve --watch --open ব্যবহার করতে পারেন)
  • আপনি উদাহরণ package.json ব্যবহার করছেন তাহলে npm run dev ব্যবহার করুন

4. JSX এবং টেমপ্লেটিং

এই বিভাগে, আপনি Lit-এ টেমপ্লেটিং এর প্রাথমিক বিষয়গুলি শিখবেন।

JSX এবং Lit টেমপ্লেট

JSX হল জাভাস্ক্রিপ্টের একটি সিনট্যাক্স এক্সটেনশন যা প্রতিক্রিয়া ব্যবহারকারীদের তাদের জাভাস্ক্রিপ্ট কোডে সহজেই টেমপ্লেট লিখতে দেয়। লিট টেমপ্লেটগুলি একই উদ্দেশ্যে কাজ করে: একটি উপাদানের UI কে তার অবস্থার একটি ফাংশন হিসাবে প্রকাশ করা।

মৌলিক সিনট্যাক্স

কোড চেকপয়েন্ট

প্রতিক্রিয়াতে আপনি এইভাবে একটি JSX হ্যালো ওয়ার্ল্ড রেন্ডার করবেন:

import 'react';
import ReactDOM from 'react-dom';

const name = 'Josh Perez';
const element = (
  <>
    <h1>Hello, {name}</h1>
    <div>How are you?</div>
  </>
);

ReactDOM.render(
  element,
  mountNode
);

উপরের উদাহরণে, দুটি উপাদান এবং একটি অন্তর্ভুক্ত "নাম" ভেরিয়েবল আছে। লিটে আপনি নিম্নলিখিতগুলি করবেন:

import {html, render} from 'lit';

const name = 'Josh Perez';
const element = html`
  <h1>Hello, ${name}</h1>
  <div>How are you?</div>`;

render(
  element,
  mountNode
);

কিছু সম্পাদক ট্যাগ করা টেমপ্লেট লিটারালের সিনট্যাক্স হাইলাইটিং সমর্থন করে না। এই কারণেই লিট টিম লিট-প্লাগইন সহ লিট খেলার মাঠ বা ভিএস কোড ব্যবহার করার পরামর্শ দেয়।

লক্ষ্য করুন যে Lit টেমপ্লেটগুলির টেমপ্লেটগুলিতে একাধিক উপাদানগুলিকে গোষ্ঠীভুক্ত করার জন্য একটি প্রতিক্রিয়া খণ্ডের প্রয়োজন নেই।

Lit-এ, টেমপ্লেটগুলিকে একটি html ট্যাগযুক্ত টেমপ্লেট LIT eral দিয়ে মোড়ানো হয়, যেখানে Lit এর নাম পাওয়া যায়!

টেমপ্লেট মান

লিট টেমপ্লেটগুলি অন্যান্য লিট টেমপ্লেটগুলি গ্রহণ করতে পারে, যা একটি TemplateResult নামে পরিচিত। উদাহরণস্বরূপ, তির্যক ( <i> ) ট্যাগগুলিতে name মোড়ানো করুন এবং এটিকে একটি ট্যাগযুক্ত টেমপ্লেট আক্ষরিক NB দিয়ে মোড়ানো নিশ্চিত করুন ব্যাকটিক অক্ষর ( ` ) ব্যবহার করা একক উদ্ধৃতি অক্ষর ( ' ) নয়।

import {html, render} from 'lit';

const name = html`<i>Josh Perez</i>`;
const element = html`
  <h1>Hello, ${name}</h1>
  <div>How are you?</div>`;

render(
  element,
  mountNode
);

Lit TemplateResult s অ্যারে, স্ট্রিং, অন্যান্য TemplateResult s, সেইসাথে নির্দেশাবলী গ্রহণ করতে পারে।

কোড চেকপয়েন্ট

একটি অনুশীলনের জন্য, নিম্নলিখিত প্রতিক্রিয়া কোডটিকে লিটে রূপান্তর করার চেষ্টা করুন:

const itemsToBuy = [
  <li>Bananas</li>,
  <li>oranges</li>,
  <li>apples</li>,
  <li>grapes</li>
];
const element = (
  <>
    <h1>Things to buy:</h1>
    <ol>
      {itemsToBuy}
    </ol>
  </>);

ReactDOM.render(
  element,
  mountNode
);

উত্তরঃ

import {html, render} from 'lit';

const itemsToBuy = [
  html`<li>Bananas</li>`,
  html`<li>oranges</li>`,
  html`<li>apples</li>`,
  html`<li>grapes</li>`
];
const element = html`
  <h1>Things to buy:</h1>
  <ol>
    ${itemsToBuy}
  </ol>`;

render(
  element,
  mountNode
);

পাসিং এবং সাজসজ্জা সেট করা

কোড চেকপয়েন্ট

JSX এবং Lit এর সিনট্যাক্সের মধ্যে সবচেয়ে বড় পার্থক্য হল ডেটা বাইন্ডিং সিনট্যাক্স। উদাহরণস্বরূপ, বাইন্ডিংয়ের সাথে এই প্রতিক্রিয়া ইনপুটটি নিন:

const disabled = false;
const label = 'my label';
const myClass = 'my-class';
const value = 'my value';
const element =
  <input
      disabled={disabled}
      className={`static-class ${myClass}`}
      defaultValue={value}/>;

ReactDOM.render(
  element,
  mountNode
);

উপরের উদাহরণে, একটি ইনপুট সংজ্ঞায়িত করা হয়েছে যা নিম্নলিখিতগুলি করে:

• একটি সংজ্ঞায়িত পরিবর্তনশীল সেট নিষ্ক্রিয় (এই ক্ষেত্রে মিথ্যা)
• ক্লাসটিকে static-class প্লাস একটি ভেরিয়েবলে সেট করে (এই ক্ষেত্রে "static-class my-class" )
• একটি ডিফল্ট মান সেট করে

লিটে আপনি নিম্নলিখিতগুলি করবেন:

import {html, render} from 'lit';

const disabled = false;
const label = 'my label';
const myClass = 'my-class';
const value = 'my value';
const element = html`
  <input
      ?disabled=${disabled}
      class="static-class ${myClass}"
      .value=${value}>`;

render(
  element,
  mountNode
);

Lit উদাহরণে একটি বুলিয়ান বাইন্ডিং disabled বৈশিষ্ট্য টগল করতে যোগ করা হয়েছে।

এর পরে, className এর পরিবর্তে সরাসরি class অ্যাট্রিবিউটের সাথে একটি বাঁধাই রয়েছে। class অ্যাট্রিবিউটে একাধিক বাইন্ডিং যোগ করা যেতে পারে, যদি না আপনি classMap নির্দেশিকা ব্যবহার করছেন যা ক্লাস টগল করার জন্য একটি ঘোষণামূলক সহায়ক।

অবশেষে, value সম্পত্তি ইনপুট সেট করা হয়. প্রতিক্রিয়ার বিপরীতে, এটি ইনপুট উপাদানটিকে শুধুমাত্র পড়ার জন্য সেট করবে না কারণ এটি ইনপুটের স্থানীয় বাস্তবায়ন এবং আচরণ অনুসরণ করে।

লিট প্রপ বাইন্ডিং সিনট্যাক্স

html`<my-element ?attribute-name=${booleanVar}>`;

• এই ? উপসর্গ হল একটি উপাদানে একটি বৈশিষ্ট্য টগল করার জন্য বাঁধাই সিনট্যাক্স
• inputRef.toggleAttribute('attribute-name', booleanVar) এর সমতুল্য
• যে উপাদানগুলি disabled disabled="false" হিসাবে ব্যবহার করে তাদের জন্য দরকারী DOM দ্বারা এখনও সত্য হিসাবে পড়া হয় কারণ inputElement.hasAttribute('disabled') === true

html`<my-element .property-name=${anyVar}>`;

• . উপসর্গ হল একটি উপাদানের একটি বৈশিষ্ট্য সেট করার জন্য বাঁধাই সিনট্যাক্স
• inputRef.propertyName = anyVar এর সমতুল্য
• অবজেক্ট, অ্যারে বা ক্লাসের মতো জটিল ডেটা পাস করার জন্য ভাল

html`<my-element attribute-name=${stringVar}>`;

• একটি উপাদানের বৈশিষ্ট্যের সাথে আবদ্ধ হয়
• inputRef.setAttribute('attribute-name', stringVar) এর সমতুল্য
• মৌলিক মান, শৈলী নিয়ম নির্বাচক, এবং ক্যোয়ারী সিলেক্টরদের জন্য ভাল

পাসিং হ্যান্ডলার

কোড চেকপয়েন্ট

const disabled = false;
const label = 'my label';
const myClass = 'my-class';
const value = 'my value';
const element =
  <input
      onClick={() => console.log('click')}
      onChange={e => console.log(e.target.value)} />;

ReactDOM.render(
  element,
  mountNode
);

উপরের উদাহরণে, একটি ইনপুট সংজ্ঞায়িত করা হয়েছে যা নিম্নলিখিতগুলি করে:

• ইনপুট ক্লিক করা হলে "ক্লিক" শব্দটি লগ করুন
• ব্যবহারকারী যখন একটি অক্ষর টাইপ করে তখন ইনপুটের মান লগ করুন

লিটে আপনি নিম্নলিখিতগুলি করবেন:

import {html, render} from 'lit';

const disabled = false;
const label = 'my label';
const myClass = 'my-class';
const value = 'my value';
const element = html`
  <input
      @click=${() => console.log('click')}
      @input=${e => console.log(e.target.value)}>`;

render(
  element,
  mountNode
);

Lit উদাহরণে, @click এর সাথে click ইভেন্টে একজন শ্রোতা যোগ করা হয়েছে।

পরবর্তীতে, onChange ব্যবহার করার পরিবর্তে, <input> -এর নেটিভ input ইভেন্টের সাথে একটি বাঁধাই করা হয়েছে কারণ নেটিভ change ইভেন্টটি শুধুমাত্র blur (এই ইভেন্টগুলিতে বিমূর্ত প্রতিক্রিয়া দেখায়)।

লিট ইভেন্ট হ্যান্ডলার সিনট্যাক্স

html`<my-element @event-name=${() => {...}}></my-element>`;

• @ উপসর্গ হল একটি ইভেন্ট শ্রোতার জন্য বাঁধাই সিনট্যাক্স
• inputRef.addEventListener('event-name', ...) এর সমতুল্য
• নেটিভ DOM ইভেন্ট নাম ব্যবহার করে

5. উপাদান এবং প্রপস

এই বিভাগে আপনি Lit ক্লাসের উপাদান এবং ফাংশন সম্পর্কে শিখবেন। রাজ্য এবং হুক পরবর্তী বিভাগে আরো বিস্তারিতভাবে আচ্ছাদিত করা হয়েছে।

ক্লাস উপাদান এবং LitElement

কোড চেকপয়েন্ট (TS) কোড চেকপয়েন্ট (JS)

রিঅ্যাক্ট ক্লাস কম্পোনেন্টের Lit সমতুল্য হল LitElement, এবং Lit এর "রিঅ্যাকটিভ প্রোপার্টি" এর ধারণা হল রিঅ্যাক্টের প্রপস এবং স্টেটের সমন্বয়। যেমন:

import React from 'react';
import ReactDOM from 'react-dom';

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

const element = <Welcome name="Elliott"/>
ReactDOM.render(
  element,
  mountNode
);

উপরের উদাহরণে একটি প্রতিক্রিয়া উপাদান রয়েছে যা:

• একটি name রেন্ডার করে
• name ডিফল্ট মান খালি স্ট্রিং এ সেট করে ( "" )
• "Elliott" name পুনরায় বরাদ্দ করে

এইভাবে আপনি LitElement এ এটি করবেন

টাইপস্ক্রিপ্টে:

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('welcome-banner')
class WelcomeBanner extends LitElement {
  @property({type: String})
  name = '';

  render() {
    return html`<h1>Hello, ${this.name}</h1>`
  }
}

জাভাস্ক্রিপ্টে:

import {LitElement, html} from 'lit';

class WelcomeBanner extends LitElement {
  static get properties() {
    return {
      name: {type: String}
    }
  }

  constructor() {
    super();
    this.name = '';
  }

  render() {
    return html`<h1>Hello, ${this.name}</h1>`
  }
}

customElements.define('welcome-banner', WelcomeBanner);

এবং HTML ফাইলে:

<!-- index.html -->
<head>
  <script type="module" src="./index.js"></script>
</head>
<body>
  <welcome-banner name="Elliott"></welcome-banner>
</body>

উপরের উদাহরণে কী ঘটছে তার একটি পর্যালোচনা:

@property({type: String})
name = '';

• একটি সর্বজনীন প্রতিক্রিয়াশীল সম্পত্তি সংজ্ঞায়িত করে – আপনার উপাদানের সর্বজনীন API এর একটি অংশ
• একটি বৈশিষ্ট্য (ডিফল্টরূপে) পাশাপাশি আপনার উপাদানের একটি সম্পত্তি প্রকাশ করে
• কিভাবে কম্পোনেন্টের অ্যাট্রিবিউট (যা স্ট্রিং) একটি মানতে অনুবাদ করতে হয় তা সংজ্ঞায়িত করে

একটি প্রতিক্রিয়াশীল সম্পত্তি হল একটি শ্রেণীর সম্পত্তি যা পরিবর্তিত হলে রেন্ডারিং জীবনচক্রকে ট্রিগার করে। তারা @property বা @state দ্বারা সংজ্ঞায়িত করা হয়। রাজ্য এবং জীবনচক্র বিভাগে প্রতিক্রিয়াশীল বৈশিষ্ট্য সম্পর্কে আরও পড়ুন।

static get properties() {
  return {
    name: {type: String}
  }
}

• এটি @property TS ডেকোরেটরের মতো একই কাজ করে কিন্তু জাভাস্ক্রিপ্টে নেটিভভাবে চলে

render() {
  return html`<h1>Hello, ${this.name}</h1>`
}

• এটি বলা হয় যখনই কোনো প্রতিক্রিয়াশীল সম্পত্তি পরিবর্তন করা হয়

@customElement('welcome-banner')
class WelcomeBanner extends LitElement {
  ...
}

• এটি একটি ক্লাস সংজ্ঞার সাথে একটি HTML এলিমেন্ট ট্যাগ নাম যুক্ত করে
• কাস্টম এলিমেন্টস স্ট্যান্ডার্ডের কারণে, ট্যাগের নাম অবশ্যই একটি হাইফেন (-) অন্তর্ভুক্ত করতে হবে
• this একটি LitElement-এ কাস্টম উপাদানের উদাহরণকে বোঝায় ( <welcome-banner> এই ক্ষেত্রে)

customElements.define('welcome-banner', WelcomeBanner);

• এটি @customElement TS ডেকোরেটরের সমতুল্য জাভাস্ক্রিপ্ট

<head>
  <script type="module" src="./index.js"></script>
</head>

• কাস্টম উপাদান সংজ্ঞা আমদানি করে

<body>
  <welcome-banner name="Elliott"></welcome-banner>
</body>

• পৃষ্ঠায় কাস্টম উপাদান যোগ করে
• name বৈশিষ্ট্য 'Elliott' এ সেট করে

বডিতে এই উপাদানটি যোগ করা লিট টেমপ্লেট, document.body.innerHTML বা অন্যান্য DOM API-এর মাধ্যমেও সম্পন্ন করা যেত

ফাংশন উপাদান

কোড চেকপয়েন্ট

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Elliott"/>
ReactDOM.render(
  element,
  mountNode
);

লিটের মধ্যে এটি হবে:

import {html, render} from 'lit';

function Welcome(props) {
  return html`<h1>Hello, ${props.name}</h1>`;
}

render(
  Welcome({name: 'Elliott'}),
  document.body.querySelector('#root')
);

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

6. রাষ্ট্র ও জীবনচক্র

এই বিভাগে আপনি Lit এর অবস্থা এবং জীবনচক্র সম্পর্কে শিখবেন।

রাজ্য

লিটের "প্রতিক্রিয়াশীল বৈশিষ্ট্য" এর ধারণাটি প্রতিক্রিয়ার অবস্থা এবং প্রপসের মিশ্রণ। প্রতিক্রিয়াশীল বৈশিষ্ট্য, পরিবর্তিত হলে, উপাদান জীবনচক্র ট্রিগার করতে পারে। প্রতিক্রিয়াশীল বৈশিষ্ট্য দুটি বৈকল্পিক আসে:

পাবলিক প্রতিক্রিয়াশীল বৈশিষ্ট্য

// React
import React from 'react';

class MyEl extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: 'there'}
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.name !== nextProps.name) {
      this.setState({name: nextProps.name})
    }
  }
}

// Lit (TS)
import {LitElement} from 'lit';
import {property} from 'lit/decorators.js';

class MyEl extends LitElement {
  @property() name = 'there';
}

• @property দ্বারা সংজ্ঞায়িত
• প্রতিক্রিয়া এর প্রপস এবং রাষ্ট্রের অনুরূপ কিন্তু পরিবর্তনযোগ্য
• পাবলিক API যা কম্পোনেন্টের ভোক্তাদের দ্বারা অ্যাক্সেস করা এবং সেট করা হয়

অভ্যন্তরীণ প্রতিক্রিয়াশীল অবস্থা

// React
import React from 'react';

class MyEl extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: 'there'}
  }
}

// Lit (TS)
import {LitElement} from 'lit';
import {state} from 'lit/decorators.js';

class MyEl extends LitElement {
  @state() name = 'there';
}

• @state দ্বারা সংজ্ঞায়িত
• প্রতিক্রিয়ার অবস্থার মতো কিন্তু পরিবর্তনযোগ্য
• ব্যক্তিগত অভ্যন্তরীণ অবস্থা যা সাধারণত উপাদান বা উপশ্রেণীর মধ্যে থেকে অ্যাক্সেস করা হয়

জীবনচক্র

লিট লাইফসাইকেল রিঅ্যাক্টের মতই কিন্তু কিছু উল্লেখযোগ্য পার্থক্য রয়েছে।

constructor

// React (js)
import React from 'react';

class MyEl extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this._privateProp = 'private';
  }
}

// Lit (ts)
class MyEl extends LitElement {
  @property({type: Number}) counter = 0;
  private _privateProp = 'private';
}

// Lit (js)
class MyEl extends LitElement {
  static get properties() {
    return { counter: {type: Number} }
  }
  constructor() {
    this.counter = 0;
    this._privateProp = 'private';
  }
}

• লিট সমতুল্যও constructor
• সুপার কলে কিছু পাস করার দরকার নেই
• দ্বারা আমন্ত্রিত (সম্পূর্ণ অন্তর্ভুক্ত নয়):
  • document.createElement
  • document.innerHTML
  • new ComponentClass()
  • যদি একটি আন-আপগ্রেড ট্যাগ নাম পৃষ্ঠায় থাকে এবং সংজ্ঞাটি @customElement বা customElements.define এর সাথে লোড এবং নিবন্ধিত হয়
• প্রতিক্রিয়া এর constructor ফাংশনে অনুরূপ

render

// React
render() {
  return <div>Hello World</div>
}

// Lit
render() {
  return html`<div>Hello World</div>`;
}

• লিট সমতুল্য এছাড়াও render হয়
• যেকোন রেন্ডারযোগ্য ফলাফল যেমন TemplateResult বা string ইত্যাদি ফেরত দিতে পারে।
• প্রতিক্রিয়ার অনুরূপ, render() একটি বিশুদ্ধ ফাংশন হওয়া উচিত
• যেকোন নোডে রেন্ডার করবে createRenderRoot() রিটার্ন দেয় ( ডিফল্টরূপে ShadowRoot )

componentDidMount

componentDidMount Lit-এর firstUpdated এবং connectedCallback লাইফসাইকেল কলব্যাক উভয়ের সংমিশ্রণের অনুরূপ।

firstUpdated

import Chart from 'chart.js';

// React
componentDidMount() {
  this._chart = new Chart(this.chartElRef.current, {...});
}

// Lit
firstUpdated() {
  this._chart = new Chart(this.chartEl, {...});
}

• কম্পোনেন্টের টেমপ্লেটটি কম্পোনেন্টের রুটে রেন্ডার করার সময় প্রথমবার বলা হয়
• শুধুমাত্র তখনই কল করা হবে যদি উপাদানটি সংযুক্ত থাকে যেমন document.createElement('my-component') এর মাধ্যমে ডাকা হয় না যতক্ষণ না সেই নোডটি DOM ট্রিতে যুক্ত করা হয়
• কম্পোনেন্ট সেটআপ করার জন্য এটি একটি ভাল জায়গা যার জন্য কম্পোনেন্ট দ্বারা রেন্ডার করা DOM প্রয়োজন
• রিঅ্যাক্টের componentDidMount বিপরীতে রিঅ্যাক্টিভ প্রপার্টিতে firstUpdated পরিবর্তনের ফলে রি-রেন্ডার হবে, যদিও ব্রাউজার সাধারণত একই ফ্রেমে পরিবর্তনগুলি ব্যাচ করবে। যদি এই পরিবর্তনগুলির জন্য রুটের DOM অ্যাক্সেসের প্রয়োজন না হয়, তাহলে তাদের সাধারণত willUpdate যাওয়া উচিত

connectedCallback

// React
componentDidMount() {
  this.window.addEventListener('resize', this.boundOnResize);
}

// Lit
connectedCallback() {
  super.connectedCallback();
  this.window.addEventListener('resize', this.boundOnResize);
}

• যখনই কাস্টম উপাদানটি DOM ট্রিতে ঢোকানো হয় তখন কল করা হয়
• প্রতিক্রিয়া উপাদানগুলির বিপরীতে, যখন কাস্টম উপাদানগুলি DOM থেকে বিচ্ছিন্ন করা হয়, তখন সেগুলি ধ্বংস হয় না এবং এইভাবে একাধিকবার "সংযুক্ত" হতে পারে
  • firstUpdated আর কল করা হবে না
• DOM পুনরায় আরম্ভ করার জন্য বা সংযোগ বিচ্ছিন্ন করার সময় পরিষ্কার করা ইভেন্ট শ্রোতাদের পুনরায় সংযুক্ত করার জন্য দরকারী
• দ্রষ্টব্য: firstUpdated আগে connectedCallback কল করা যেতে পারে তাই প্রথম কলে, DOM উপলব্ধ নাও হতে পারে

componentDidUpdate

// React
componentDidUpdate(prevProps) {
  if (this.props.title !== prevProps.title) {
    this._chart.setTitle(this.props.title);
  }
}

// Lit (ts)
updated(prevProps: PropertyValues<this>) {
  if (prevProps.has('title')) {
    this._chart.setTitle(this.title);
  }
}

• লিট সমতুল্য updated হয়েছে ("আপডেট" এর ইংরেজি অতীত কাল ব্যবহার করে)
• প্রতিক্রিয়া থেকে ভিন্ন, প্রাথমিক রেন্ডারেও updated বলা হয়
• প্রতিক্রিয়ার componentDidUpdate ফাংশনের অনুরূপ

প্রতিক্রিয়াশীল সম্পত্তি পরিবর্তনের উপর একটি পুনরায় রেন্ডার ট্রিগার করতে চান না? willUpdate এবং update জন্য উন্নত বিষয় - রাজ্য এবং জীবনচক্র দেখুন।

componentWillUnmount

// React
componentWillUnmount() {
  this.window.removeEventListener('resize', this.boundOnResize);
}

// Lit
disconnectedCallback() {
  super.disconnectedCallback();
  this.window.removeEventListener('resize', this.boundOnResize);
}

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

ব্যায়াম

কোড চেকপয়েন্ট (টিএস) কোড চেকপয়েন্ট (জেএস)

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

উপরের উদাহরণে, একটি সাধারণ ঘড়ি রয়েছে যা নিম্নলিখিতগুলি করে:

• এটি "হ্যালো ওয়ার্ল্ড! এটা" রেন্ডার করে এবং তারপর সময় প্রদর্শন করে
• প্রতি সেকেন্ডে এটি ঘড়ি আপডেট করবে
• ডিমাউন্ট করা হলে, এটি টিক কল করার ব্যবধান সাফ করে

প্রথমে উপাদান শ্রেণীর ঘোষণা দিয়ে শুরু করুন:

// Lit (TS)
// some imports here are imported in advance
import {LitElement, html} from 'lit';
import {customElement, state} from 'lit/decorators.js';

@customElement('lit-clock')
class LitClock extends LitElement {
}

// Lit (JS)
// `html` is imported in advance
import {LitElement, html} from 'lit';

class LitClock extends LitElement {
}

customElements.define('lit-clock', LitClock);

এর পরে, date শুরু করুন এবং এটিকে @state এর সাথে একটি অভ্যন্তরীণ প্রতিক্রিয়াশীল সম্পত্তি ঘোষণা করুন কারণ উপাদানটির ব্যবহারকারীরা সরাসরি date নির্ধারণ করবে না।

যদিও জাভাস্ক্রিপ্ট নির্দিষ্ট ব্রাউজারে ব্যক্তিগত বৈশিষ্ট্য সমর্থন করে, সরলতার জন্য, আমরা এই উদাহরণে সেগুলি বা _ উপসর্গযুক্ত বৈশিষ্ট্যগুলি ব্যবহার করব না।

// Lit (TS)
import {LitElement, html} from 'lit';
import {customElement, state} from 'lit/decorators.js';

@customElement('lit-clock')
class LitClock extends LitElement {
  @state() // declares internal reactive prop
  private date = new Date(); // initialization
}

// Lit (JS)
import {LitElement, html} from 'lit';

class LitClock extends LitElement {
  static get properties() {
    return {
      // declares internal reactive prop
      date: {state: true}
    }
  }

  constructor() {
    super();
    // initialization
    this.date = new Date();
  }
}

customElements.define('lit-clock', LitClock);

এর পরে, টেমপ্লেটটি রেন্ডার করুন।

লাইফসাইকেল কলের ক্রম অনুসারে লিট পদ্ধতিগুলি সাজানো ভাল অভ্যাস। এই ক্ষেত্রে এটি properties , constructor , তারপর render হবে।

// Lit (JS & TS)
render() {
  return html`
    <div>
      <h1>Hello, World!</h1>
      <h2>It is ${this.date.toLocaleTimeString()}.</h2>
    </div>
  `;
}

এখন, টিক পদ্ধতি প্রয়োগ করুন।

tick() {
  this.date = new Date();
}

এরপর আসে componentDidMount এর বাস্তবায়ন। আবার, Lit এনালগ হল firstUpdated এবং connectedCallback এর মিশ্রণ। এই কম্পোনেন্টের ক্ষেত্রে, setInterval দিয়ে tick কল করার জন্য রুটের ভিতরে DOM-এ অ্যাক্সেসের প্রয়োজন হয় না। অতিরিক্তভাবে, ডকুমেন্ট ট্রি থেকে উপাদানটি সরানো হলে ব্যবধানটি সাফ হয়ে যাবে, তাই এটি পুনরায় সংযুক্ত করা হলে, ব্যবধানটি আবার শুরু করতে হবে। সুতরাং, connectedCallback এখানে একটি ভাল পছন্দ।

// Lit (TS)
@customElement('lit-clock')
class LitClock extends LitElement {
  @state()
  private date = new Date();
  // initialize timerId for TS
  private timerId = -1 as unknown as ReturnType<typeof setTimeout>;

  connectedCallback() {
    super.connectedCallback();
    this.timerId = setInterval(
      () => this.tick(),
      1000
    );
  }

  ...
}

// Lit (JS)
constructor() {
  super();
  // initialization
  this.date = new Date();
  this.timerId = -1; // initialize timerId for JS
}

connectedCallback() {
  super.connectedCallback();
  this.timerId = setInterval(
    () => this.tick(),
    1000
  );
}

অবশেষে, ব্যবধানটি পরিষ্কার করুন যাতে নথি গাছ থেকে উপাদানটি সংযোগ বিচ্ছিন্ন হওয়ার পরে এটি টিকটি কার্যকর না করে।

// Lit (TS & JS)
disconnectedCallback() {
  super.disconnectedCallback();
  clearInterval(this.timerId);
}

এটি সব একসাথে রাখা, এটি এই মত হওয়া উচিত:

// Lit (TS)
import {LitElement, html} from 'lit';
import {customElement, state} from 'lit/decorators.js';

@customElement('lit-clock')
class LitClock extends LitElement {
  @state()
  private date = new Date();
  private timerId = -1 as unknown as ReturnType<typeof setTimeout>;

  connectedCallback() {
    super.connectedCallback();
    this.timerId = setInterval(
      () => this.tick(),
      1000
    );
  }

  tick() {
    this.date = new Date();
  }

  render() {
    return html`
      <div>
        <h1>Hello, World!</h1>
        <h2>It is ${this.date.toLocaleTimeString()}.</h2>
      </div>
    `;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.timerId);
  }
}

// Lit (JS)
import {LitElement, html} from 'lit';

class LitClock extends LitElement {
  static get properties() {
    return {
      date: {state: true}
    }
  }

  constructor() {
    super();
    this.date = new Date();
  }

  connectedCallback() {
    super.connectedCallback();
    this.timerId = setInterval(
      () => this.tick(),
      1000
    );
  }

  tick() {
    this.date = new Date();
  }

  render() {
    return html`
      <div>
        <h1>Hello, World!</h1>
        <h2>It is ${this.date.toLocaleTimeString()}.</h2>
      </div>
    `;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.timerId);
  }
}

customElements.define('lit-clock', LitClock);

7. হুক

এই বিভাগে, আপনি কীভাবে প্রতিক্রিয়া হুক ধারণাগুলিকে Lit-এ অনুবাদ করবেন তা শিখবেন।

প্রতিক্রিয়া হুক ধারণা

প্রতিক্রিয়া হুকগুলি ফাংশন উপাদানগুলিকে রাজ্যে "হুক" করার একটি উপায় সরবরাহ করে। এর বেশ কিছু সুবিধা রয়েছে।

• তারা রাষ্ট্রীয় যুক্তির পুনর্ব্যবহারকে সরল করে
• একটি উপাদানকে ছোট ফাংশনে বিভক্ত করতে সাহায্য করুন

উপরন্তু, ফাংশন-ভিত্তিক উপাদানগুলির উপর ফোকাস প্রতিক্রিয়ার ক্লাস-ভিত্তিক সিনট্যাক্সের সাথে কিছু সমস্যা সমাধান করেছে যেমন:

• constructor থেকে super props পাস করতে হবে
• constructor বৈশিষ্ট্যগুলির অপরিচ্ছন্ন সূচনা৷
  • এটি সেই সময়ে প্রতিক্রিয়া টিমের দ্বারা বলা একটি কারণ ছিল কিন্তু ES2019 দ্বারা সমাধান করা হয়েছে
• this দ্বারা সৃষ্ট সমস্যাগুলি আর উপাদানকে উল্লেখ করে না

লিট-এ প্রতিক্রিয়া হুক ধারণা

কম্পোনেন্টস এবং প্রপস বিভাগে উল্লিখিত হিসাবে, Lit একটি ফাংশন থেকে কাস্টম উপাদান তৈরি করার উপায় অফার করে না, তবে LitElement প্রতিক্রিয়া ক্লাসের উপাদানগুলির সাথে বেশিরভাগ প্রধান সমস্যাগুলির সমাধান করে। যেমন:

// React (at the time of making hooks)
import React from 'react';
import ReactDOM from 'react-dom';

class MyEl extends React.Component {
  constructor(props) {
    super(props); // Leaky implementation
    this.state = {count: 0};
    this._chart = null; // Deemed messy
  }

  render() {
    return (
      <>
        <div>Num times clicked {count}</div>
        <button onClick={this.clickCallback}>click me</button>
      </>
    );
  }

  clickCallback() {
    // Errors because `this` no longer refers to the component
    this.setState({count: this.count + 1});
  }
}

// Lit (ts)
class MyEl extends LitElement {
  @property({type: Number}) count = 0; // No need for constructor to set state
  private _chart = null; // Public class fields introduced to JS in 2019

  render() {
    return html`
        <div>Num times clicked ${count}</div>
        <button @click=${this.clickCallback}>click me</button>`;
  }

  private clickCallback() {
    // No error because `this` refers to component
    this.count++;
  }
}

কিভাবে Lit এই সমস্যাগুলি সমাধান করে?

• constructor কোন আর্গুমেন্ট নেয় না
• সমস্ত @event বাইন্ডিং this সাথে স্বয়ংক্রিয়ভাবে আবদ্ধ হয়
• this বেশিরভাগ ক্ষেত্রেই কাস্টম উপাদানের রেফারেন্সকে বোঝায়
• ক্লাসের বৈশিষ্ট্যগুলিকে এখন ক্লাস সদস্য হিসাবে ইনস্ট্যান্ট করা যেতে পারে। এটি কনস্ট্রাক্টর-ভিত্তিক বাস্তবায়ন পরিষ্কার করে

প্রতিক্রিয়াশীল কন্ট্রোলার

কোড চেকপয়েন্ট (টিএস) কোড চেকপয়েন্ট (জেএস)

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

একটি প্রতিক্রিয়াশীল কন্ট্রোলার হল একটি অবজেক্ট ইন্টারফেস যা LitElement এর মত একটি কন্ট্রোলার হোস্টের আপডেট লাইফসাইকেলকে সংযুক্ত করতে পারে।

Lit উপাদান জীবনচক্র সম্পর্কে আরও তথ্যের জন্য রাজ্য এবং জীবনচক্র দেখুন।

একটি ReactiveController এবং একটি reactiveControllerHost এর জীবনচক্র হল:

interface ReactiveController {
  hostConnected(): void;
  hostUpdate(): void;
  hostUpdated(): void;
  hostDisconnected(): void;
}
interface ReactiveControllerHost {
  addController(controller: ReactiveController): void;
  removeController(controller: ReactiveController): void;
  requestUpdate(): void;
  readonly updateComplete: Promise<boolean>;
}

একটি প্রতিক্রিয়াশীল নিয়ামক তৈরি করে এবং addController সাথে এটিকে একটি হোস্টের সাথে সংযুক্ত করে, কন্ট্রোলারের জীবনচক্র হোস্টের পাশাপাশি বলা হবে। উদাহরণস্বরূপ, রাজ্য এবং জীবনচক্র বিভাগ থেকে ঘড়ির উদাহরণটি স্মরণ করুন:

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

উপরের উদাহরণে, একটি সাধারণ ঘড়ি রয়েছে যা নিম্নলিখিতগুলি করে:

• এটি "হ্যালো ওয়ার্ল্ড! এটা" রেন্ডার করে এবং তারপর সময় প্রদর্শন করে
• প্রতি সেকেন্ডে এটি ঘড়ি আপডেট করবে
• ডিমাউন্ট করা হলে, এটি টিক কল করার ব্যবধান সাফ করে

উপাদান ভারা নির্মাণ

প্রথমে কম্পোনেন্ট ক্লাস ডিক্লেয়ারেশন দিয়ে শুরু করুন এবং render ফাংশন যোগ করুন।

// Lit (TS) - index.ts
import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>
        <h1>Hello, world!</h1>
        <h2>It is ${'time to get Lit'}.</h2>
      </div>
    `;
  }
}

// Lit (JS) - index.js
import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>
        <h1>Hello, world!</h1>
        <h2>It is ${'time to get Lit'}.</h2>
      </div>
    `;
  }
}

customElements.define('my-element', MyElement);

নিয়ামক নির্মাণ

এখন clock.ts এ সুইচ করুন এবং ClockController এর জন্য একটি ক্লাস করুন এবং constructor সেট আপ করুন:

// Lit (TS) - clock.ts
import {ReactiveController, ReactiveControllerHost} from 'lit';

export class ClockController implements ReactiveController {
  private readonly host: ReactiveControllerHost;

  constructor(host: ReactiveControllerHost) {
    this.host = host;
    host.addController(this);
  }

  hostConnected() {
  }

  private tick() {
  }

  hostDisconnected() {
  }
}

// Lit (JS) - clock.js
export class ClockController {
  constructor(host) {
    this.host = host;
    host.addController(this);
  }

  hostConnected() {
  }

  tick() {
  }

  hostDisconnected() {
  }
}

একটি প্রতিক্রিয়াশীল কন্ট্রোলার যতক্ষণ পর্যন্ত এটি ReactiveController ইন্টারফেস ভাগ করে ততক্ষণ পর্যন্ত যে কোনও উপায়ে তৈরি করা যেতে পারে, তবে একটি constructor সাথে একটি ক্লাস ব্যবহার করে যা একটি ReactiveControllerHost ইন্টারফেস এবং সেইসাথে নিয়ামক শুরু করার জন্য প্রয়োজনীয় অন্যান্য বৈশিষ্ট্যগুলি গ্রহণ করতে পারে এমন একটি প্যাটার্ন যা Lit টিম পছন্দ করে বেশিরভাগ মৌলিক ক্ষেত্রে ব্যবহার করুন।

এখন আপনাকে প্রতিক্রিয়া লাইফসাইকেল কলব্যাকগুলিকে কন্ট্রোলার কলব্যাকে অনুবাদ করতে হবে৷ সংক্ষেপে:

• componentDidMount
  • LitElement এর connectedCallback
  • কন্ট্রোলারের hostConnected
• ComponentWillUnmount
  • LitElement এর disconnectedCallback
  • কন্ট্রোলারের hostDisconnected

প্রতিক্রিয়া জীবনচক্রকে লিট লাইফসাইকেলে অনুবাদ করার বিষয়ে আরও তথ্যের জন্য, রাজ্য এবং জীবনচক্র বিভাগটি দেখুন।

এর পরে, hostConnected কলব্যাক এবং tick পদ্ধতিগুলি প্রয়োগ করুন এবং স্টেট এবং লাইফসাইকেল বিভাগে উদাহরণের মতো hostDisconnected ব্যবধান পরিষ্কার করুন।

// Lit (TS) - clock.ts
export class ClockController implements ReactiveController {
  private readonly host: ReactiveControllerHost;
  private interval = 0 as unknown as ReturnType<typeof setTimeout>;
  date = new Date();

  constructor(host: ReactiveControllerHost) {
    this.host = host;
    host.addController(this);
  }

  hostConnected() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  private tick() {
    this.date = new Date();
  }

  hostDisconnected() {
    clearInterval(this.interval);
  }
}

// Lit (JS) - clock.js
export class ClockController {
  interval = 0;
  host;
  date = new Date();

  constructor(host) {
    this.host = host;
    host.addController(this);
  }

  hostConnected() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.date = new Date();
  }

  hostDisconnected() {
    clearInterval(this.interval);
  }
}

কন্ট্রোলার ব্যবহার করে

ক্লক কন্ট্রোলার ব্যবহার করতে, কন্ট্রোলার ইম্পোর্ট করুন এবং index.ts বা index.js এ কম্পোনেন্ট আপডেট করুন।

// Lit (TS) - index.ts
import {LitElement, html, ReactiveController, ReactiveControllerHost} from 'lit';
import {customElement} from 'lit/decorators.js';
import {ClockController} from './clock.js';

@customElement('my-element')
class MyElement extends LitElement {
  private readonly clock = new ClockController(this); // Instantiate

  render() {
    // Use controller
    return html`
      <div>
        <h1>Hello, world!</h1>
        <h2>It is ${this.clock.date.toLocaleTimeString()}.</h2>
      </div>
    `;
  }
}

// Lit (JS) - index.js
import {LitElement, html} from 'lit';
import {ClockController} from './clock.js';

class MyElement extends LitElement {
  clock = new ClockController(this); // Instantiate

  render() {
    // Use controller
    return html`
      <div>
        <h1>Hello, world!</h1>
        <h2>It is ${this.clock.date.toLocaleTimeString()}.</h2>
      </div>
    `;
  }
}

customElements.define('my-element', MyElement);

কন্ট্রোলার ব্যবহার করার জন্য, আপনাকে কন্ট্রোলার হোস্টের (যা <my-element> উপাদান) রেফারেন্স দিয়ে কন্ট্রোলারকে ইনস্ট্যান্টিয়েট করতে হবে এবং তারপর render পদ্ধতিতে কন্ট্রোলার ব্যবহার করতে হবে।

কন্ট্রোলারে রি-রেন্ডারকে ট্রিগার করা

লক্ষ্য করুন যে এটি সময় দেখাবে, কিন্তু সময় আপডেট হচ্ছে না। এর কারণ হল কন্ট্রোলার প্রতি সেকেন্ডে তারিখ নির্ধারণ করছে, কিন্তু হোস্ট আপডেট করছে না। এর কারণ হল ClockController ক্লাসে date পরিবর্তন হচ্ছে এবং কম্পোনেন্ট আর নয়। এর মানে হল যে কন্ট্রোলারে date সেট করার পরে, হোস্টকে host.requestUpdate() দিয়ে তার আপডেট লাইফসাইকেল চালানোর জন্য বলা দরকার।

// Lit (TS & JS) - clock.ts / clock.js
private tick() {
  this.date = new Date();
  this.host.requestUpdate();
}

এখন ঘড়ির কাটা উচিত!

হুকগুলির সাথে সাধারণ ব্যবহারের ক্ষেত্রে আরও গভীরভাবে তুলনা করার জন্য, অনুগ্রহ করে অ্যাডভান্সড টপিকস - হুকস বিভাগটি দেখুন৷

8. শিশু

এই বিভাগে, আপনি শিখবেন কিভাবে লিট-এ শিশুদের পরিচালনা করতে স্লট ব্যবহার করতে হয়।

স্লট এবং শিশু

কোড চেকপয়েন্ট (TS)

স্লটগুলি আপনাকে নেস্ট উপাদানগুলির অনুমতি দিয়ে রচনা সক্ষম করে৷

প্রতিক্রিয়ায়, শিশুদের প্রপসের মাধ্যমে উত্তরাধিকারসূত্রে পাওয়া যায়। ডিফল্ট স্লট হল props.children এবং render ফাংশন ডিফল্ট স্লটটি কোথায় অবস্থিত তা নির্ধারণ করে। যেমন:

const MyArticle = (props) => {
 return <article>{props.children}</article>;
};

মনে রাখবেন যে props.children হল প্রতিক্রিয়া উপাদান এবং HTML উপাদান নয়।

Lit-এ, বাচ্চাদের রেন্ডার ফাংশনে স্লট উপাদান দিয়ে তৈরি করা হয়। লক্ষ্য করুন শিশুরা উত্তরাধিকারসূত্রে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না। Lit-এ, বাচ্চারা হল স্লটের সাথে সংযুক্ত HTMLElements। এই সংযুক্তিটিকে বলা হয় প্রজেকশন ।

@customElement("my-article")
export class MyArticle extends LitElement {
  render() {
    return html`
      <article>
        <slot></slot>
      </article>
   `;
  }
}

দ্রষ্টব্য: কোড চেকপয়েন্টগুলিতে, index.html এ স্লট করা উপাদানগুলি লক্ষ্য করুন

একাধিক স্লট

কোড চেকপয়েন্ট

প্রতিক্রিয়াতে, একাধিক স্লট যোগ করা মূলত আরও প্রপস উত্তরাধিকার সূত্রে পাওয়া সমান।

const MyArticle = (props) => {
  return (
    <article>
      <header>
        {props.headerChildren}
      </header>
      <section>
        {props.sectionChildren}
      </section>
    </article>
  );
};

একইভাবে, আরও <slot> উপাদান যোগ করলে Lit-এ আরও স্লট তৈরি হয়। একাধিক স্লট name বৈশিষ্ট্য দিয়ে সংজ্ঞায়িত করা হয়েছে: <slot name="slot-name"> । এটি শিশুদের কোন স্লট বরাদ্দ করা হবে তা ঘোষণা করতে দেয়৷

@customElement("my-article")
export class MyArticle extends LitElement {
  render() {
    return html`
      <article>
        <header>
          <slot name="headerChildren"></slot>
        </header>
        <section>
          <slot name="sectionChildren"></slot>
        </section>
      </article>
   `;
  }
}

ডিফল্ট স্লট সামগ্রী

স্লট তাদের সাবট্রি প্রদর্শন করবে যখন সেই স্লটে প্রজেক্ট করা কোন নোড থাকবে না। যখন নোডগুলি একটি স্লটে প্রজেক্ট করা হয়, তখন সেই স্লটটি তার সাবট্রি প্রদর্শন করবে না এবং পরিবর্তে প্রজেক্টেড নোডগুলি প্রদর্শন করবে।

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`
      <section>
        <div>
          <slot name="slotWithDefault">
            <p>
             This message will not be rendered when children are attached to this slot!
            <p>
          </slot>
        </div>
      </section>
   `;
  }
}

বাচ্চাদের স্লটে বরাদ্দ করুন

কোড চেকপয়েন্ট

প্রতিক্রিয়ায়, শিশুদের একটি উপাদানের বৈশিষ্ট্যের মাধ্যমে স্লটে বরাদ্দ করা হয়। নীচের উদাহরণে, প্রতিক্রিয়া উপাদানগুলি headerChildren এবং sectionChildren props-এ পাঠানো হয়৷

const MyNewsArticle = () => {
 return (
   <MyArticle
     headerChildren={<h3>Extry, Extry! Read all about it!</h3>}
     sectionChildren={<p>Children are props in React!</p>}
   />
 );
};

Lit-এ, বাচ্চাদের slot অ্যাট্রিবিউট ব্যবহার করে স্লটে বরাদ্দ করা হয়।

@customElement("my-news-article")
export class MyNewsArticle extends LitElement {
  render() {
    return html`
      <my-article>
        <h3 slot="headerChildren">
          Extry, Extry! Read all about it!
        </h3>
        <p slot="sectionChildren">
          Children are composed with slots in Lit!
        </p>
      </my-article>
   `;
  }
}

যদি কোনও ডিফল্ট স্লট না থাকে (যেমন <slot> ) এবং এমন কোনও স্লট না থাকে যার একটি name বৈশিষ্ট্য (যেমন <slot name="foo"> ) থাকে যা কাস্টম উপাদানের বাচ্চাদের slot বৈশিষ্ট্যের সাথে মেলে (যেমন <div slot="foo"> ), তাহলে সেই নোডটি প্রজেক্ট করা হবে না এবং প্রদর্শিত হবে না।

9. Refs

মাঝে মাঝে, একজন বিকাশকারীকে একটি HTMLElement এর API অ্যাক্সেস করতে হতে পারে।

এই বিভাগে, আপনি শিখবেন কিভাবে Lit এ এলিমেন্ট রেফারেন্স অর্জন করতে হয়।

প্রতিক্রিয়া রেফারেন্স

কোড চেকপয়েন্ট (টিএস) কোড চেকপয়েন্ট (জেএস)

একটি প্রতিক্রিয়া উপাদান একটি ফাংশন কলের একটি সিরিজে স্থানান্তরিত হয় যা আহ্বান করার সময় একটি ভার্চুয়াল DOM তৈরি করে। এই ভার্চুয়াল DOM ReactDOM দ্বারা ব্যাখ্যা করা হয় এবং HTMLElements রেন্ডার করে।

প্রতিক্রিয়াতে, রেফগুলি একটি জেনারেটেড HTMLElement ধারণ করার জন্য মেমরিতে স্থান।

const RefsExample = (props) => {
 const inputRef = React.useRef(null);
 const onButtonClick = React.useCallback(() => {
   inputRef.current?.focus();
 }, [inputRef]);

 return (
   <div>
     <input type={"text"} ref={inputRef} />
     <br />
     <button onClick={onButtonClick}>
       Click to focus on the input above!
     </button>
   </div>
 );
};

উপরের উদাহরণে, প্রতিক্রিয়া উপাদান নিম্নলিখিত কাজ করবে:

• একটি খালি পাঠ্য ইনপুট এবং পাঠ্য সহ একটি বোতাম রেন্ডার করুন
• বোতামটি ক্লিক করার সময় ইনপুট ফোকাস করুন

প্রাথমিক রেন্ডারের পরে, React ref অ্যাট্রিবিউটের মাধ্যমে জেনারেট হওয়া HTMLInputElement এ inputRef.current সেট করবে।

@query এর সাথে "রেফারেন্স" লিখুন

লিট ব্রাউজারের কাছাকাছি থাকে এবং নেটিভ ব্রাউজার বৈশিষ্ট্যগুলির উপর একটি খুব পাতলা বিমূর্ততা তৈরি করে।

Lit-এ refs এর সমতুল্য প্রতিক্রিয়া হল @query এবং @queryAll decorators দ্বারা ফেরত দেওয়া HTMLElement।

@customElement("my-element")
export class MyElement extends LitElement {
  @query('input') // Define the query
  inputEl!: HTMLInputElement; // Declare the prop

  // Declare the click event listener
  onButtonClick() {
    // Use the query to focus
    this.inputEl.focus();
  }

  render() {
    return html`
      <input type="text">
      <br />
      <!-- Bind the click listener -->
      <button @click=${this.onButtonClick}>
        Click to focus on the input above!
      </button>
   `;
  }
}

উপরের উদাহরণে, Lit উপাদান নিম্নলিখিত কাজ করে:

• @query ডেকোরেটর ব্যবহার করে MyElement এ একটি সম্পত্তি সংজ্ঞায়িত করে (একটি HTMLInputElement এর জন্য একটি গেটার তৈরি করা)।
• onButtonClick নামে একটি ক্লিক ইভেন্ট কলব্যাক ঘোষণা করে এবং সংযুক্ত করে।
• বোতাম ক্লিক ইনপুট ফোকাস

জাভাস্ক্রিপ্টে, @query এবং @queryAll decorators যথাক্রমে querySelector এবং querySelectorAll সম্পাদন করে। এটি @query('input') inputEl!: HTMLInputElement;

get inputEl() {
  return this.renderRoot.querySelector('input');
}

Lit কম্পোনেন্ট render পদ্ধতির টেমপ্লেটকে my-element এর রুটে কমিট করার পরে, @query ডেকোরেটর এখন inputEl রেন্ডার রুটে পাওয়া প্রথম input উপাদানটি ফেরত দেওয়ার অনুমতি দেবে। @query নির্দিষ্ট উপাদান খুঁজে না পেলে এটি null হবে।

রেন্ডার রুটে একাধিক input উপাদান থাকলে, @queryAll নোডের একটি তালিকা ফিরিয়ে দেবে।

10. মধ্যস্থতাকারী রাষ্ট্র

এই বিভাগে, আপনি শিখবেন কিভাবে Lit-এ উপাদানগুলির মধ্যে মধ্যস্থতা করতে হয়।

পুনর্ব্যবহারযোগ্য উপাদান

কোড চেকপয়েন্ট (TS)

প্রতিক্রিয়া টপ ডাউন ডেটা ফ্লো সহ কার্যকরী রেন্ডারিং পাইপলাইন অনুকরণ করে। পিতামাতারা প্রপসের মাধ্যমে শিশুদের রাষ্ট্র প্রদান করে। বাচ্চারা প্রপসে পাওয়া কলব্যাকের মাধ্যমে পিতামাতার সাথে যোগাযোগ করে।

const CounterButton = (props) => {
  const label = props.step < 0
    ? `- ${-1 * props.step}`
    : `+ ${props.step}`;


  return (
    <button
      onClick={() =>
        props.addToCounter(props.step)}>{label}</button>
  );
};

উপরের উদাহরণে, একটি প্রতিক্রিয়া উপাদান নিম্নলিখিত কাজ করে:

• মান props.step এর উপর ভিত্তি করে একটি লেবেল তৈরি করে।
• এটির লেবেল হিসাবে +step বা -step সহ একটি বোতাম রেন্ডার করে
• ক্লিকে একটি যুক্তি হিসাবে props.step সহ props.addToCounter কল করে মূল উপাদান আপডেট করে

যদিও লিট-এ কলব্যাক পাস করা সম্ভব, প্রচলিত নিদর্শনগুলি ভিন্ন। উপরের উদাহরণে প্রতিক্রিয়া উপাদানটি নীচের উদাহরণে একটি লিট উপাদান হিসাবে লেখা যেতে পারে:

@customElement('counter-button')
export class CounterButton extends LitElement {
  @property({type: Number}) step: number = 0;

  onClick() {
    const event = new CustomEvent('update-counter', {
      bubbles: true,
      detail: {
        step: this.step,
      }
    });

    this.dispatchEvent(event);
  }

  render() {
    const label = this.step < 0
      ? `- ${-1 * this.step}`  // "- 1"
      : `+ ${this.step}`;      // "+ 1"

    return html`
      <button @click=${this.onClick}>${label}</button>
    `;
  }
}

উপরের উদাহরণে, একটি লিট উপাদান নিম্নলিখিত কাজ করবে:

• প্রতিক্রিয়াশীল সম্পত্তি step তৈরি করুন
• update-counter নামে একটি কাস্টম ইভেন্ট প্রেরণ করুন যা ক্লিকে উপাদানটির step মান বহন করে

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

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

রাষ্ট্রীয় উপাদান

কোড চেকপয়েন্ট

প্রতিক্রিয়ায়, রাষ্ট্র পরিচালনা করতে হুক ব্যবহার করা সাধারণ। CounterButton কম্পোনেন্ট পুনরায় ব্যবহার করে একটি MyCounter উপাদান তৈরি করা যেতে পারে। CounterButton উভয় ক্ষেত্রে addToCounter কীভাবে পাস করা হয় তা লক্ষ্য করুন।

const MyCounter = (props) => {
 const [counterSum, setCounterSum] = React.useState(0);
 const addToCounter = useCallback(
   (step) => {
     setCounterSum(counterSum + step);
   },
   [counterSum, setCounterSum]
 );

 return (
   <div>
     <h3>&Sigma;: {counterSum}</h3>
     <CounterButton
       step={-1}
       addToCounter={addToCounter} />
     <CounterButton
       step={1}
       addToCounter={addToCounter} />
   </div>
 );
};

উপরের উদাহরণ নিম্নলিখিত কাজ করে:

• একটি count অবস্থা তৈরি করে।
• একটি কলব্যাক তৈরি করে যা একটি count অবস্থায় একটি নম্বর যোগ করে।
• CounterButton প্রতি ক্লিকে step count আপডেট করতে addToCounter ব্যবহার করে।

MyCounter এর অনুরূপ বাস্তবায়ন Lit-এ অর্জন করা যেতে পারে। লক্ষ্য করুন কিভাবে addToCounter counter-button পাস করা হয় না। পরিবর্তে, কলব্যাক একটি অভিভাবক উপাদানে @update-counter ইভেন্টে ইভেন্ট শ্রোতা হিসাবে আবদ্ধ।

@customElement("my-counter")
export class MyCounter extends LitElement {
  @property({type: Number}) count = 0;

  addToCounter(e: CustomEvent<{step: number}>) {
    // Get step from detail of event or via @query
    this.count += e.detail.step;
  }

  render() {
    return html`
      <div @update-counter="${this.addToCounter}">
        <h3>&Sigma; ${this.count}</h3>
        <counter-button step="-1"></counter-button>
        <counter-button step="1"></counter-button>
      </div>
    `;
  }
}

উপরের উদাহরণ নিম্নলিখিত কাজ করে:

• count নামে একটি প্রতিক্রিয়াশীল সম্পত্তি তৈরি করে যা মান পরিবর্তন করা হলে উপাদানটি আপডেট করবে
• addToCounter কলব্যাককে @update-counter ইভেন্ট শ্রোতার সাথে আবদ্ধ করে
• update-counter ইভেন্টের detail.step এ পাওয়া মান যোগ করে আপডেট count
• step অ্যাট্রিবিউটের মাধ্যমে counter-button step মান সেট করে

পিতামাতা থেকে শিশুদের মধ্যে পরিবর্তন সম্প্রচার করতে Lit-এ প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি ব্যবহার করা আরও প্রচলিত। একইভাবে, ব্রাউজারের ইভেন্ট সিস্টেমটি নিচ থেকে বুদবুদ করার জন্য ব্যবহার করা ভাল অনুশীলন।

এই পদ্ধতিটি সর্বোত্তম অনুশীলনগুলি অনুসরণ করে এবং ওয়েব উপাদানগুলির জন্য ক্রস-প্ল্যাটফর্ম সমর্থন প্রদানের Lit-এর লক্ষ্যকে মেনে চলে।

11. স্টাইলিং

এই বিভাগে আপনি লিট-এ স্টাইলিং সম্পর্কে শিখবেন।

স্টাইলিং

লিট উপাদান শৈলী করার পাশাপাশি একটি অন্তর্নির্মিত সমাধানের একাধিক উপায় অফার করে।

ইনলাইন শৈলী

কোড চেকপয়েন্ট

Lit ইনলাইন শৈলী সমর্থন করে সেইসাথে তাদের সাথে বাঁধাই।

import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>
        <h1 style="color:orange;">This text is orange</h1>
        <h1 style="color:rebeccapurple;">This text is rebeccapurple</h1>
      </div>
    `;
  }
}

উপরের উদাহরণে একটি ইনলাইন শৈলী সহ 2টি শিরোনাম রয়েছে।

এখন border-color.js থেকে কমলা পাঠ্যে একটি বর্ডার আমদানি করুন এবং বাঁধুন:

...
import borderColor from './border-color.js';

...

html`
  ...
  <h1 style="color:orange;${borderColor}">This text is orange</h1>
  ...`

প্রতিবার স্টাইল স্ট্রিং গণনা করা কিছুটা বিরক্তিকর হতে পারে, তাই Lit এটিতে সহায়তা করার জন্য একটি নির্দেশনা অফার করে।

স্টাইলম্যাপ

styleMap নির্দেশিকা ইনলাইন শৈলী সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করা সহজ করে তোলে। যেমন:

কোড চেকপয়েন্ট (TS)

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {styleMap} from 'lit/directives/style-map.js';

@customElement('my-element')
class MyElement extends LitElement {
  @property({type: String})
  color = '#000'

  render() {
    // Define the styleMap
    const headerStyle = styleMap({
      'border-color': this.color,
    });

    return html`
      <div>
        <h1
          style="border-style:solid;
          <!-- Use the styleMap -->
          border-width:2px;${headerStyle}">
          This div has a border color of ${this.color}
        </h1>
        <input
          type="color"
          @input=${e => (this.color = e.target.value)}
          value="#000">
      </div>
    `;
  }
}

উপরের উদাহরণ নিম্নলিখিত কাজ করে:

• একটি বর্ডার এবং একটি রঙ পিকার সহ একটি h1 প্রদর্শন করে৷
• কালার পিকার থেকে border-color মান পরিবর্তন করে

উপরন্তু, styleMap আছে যা h1 এর শৈলী সেট করতে ব্যবহৃত হয়। styleMap রিঅ্যাক্টের style অ্যাট্রিবিউট বাইন্ডিং সিনট্যাক্সের অনুরূপ একটি সিনট্যাক্স অনুসরণ করে।

styleMap ব্যবহার করার সময়, অন্য কোন জাভাস্ক্রিপ্ট বাইন্ডিং (যেমন ${...} ) একই style অ্যাট্রিবিউটে প্রয়োগ করা যাবে না।

CSSResult

কোড চেকপয়েন্ট

স্টাইল উপাদানের প্রস্তাবিত উপায় হল css ট্যাগ করা টেমপ্লেট আক্ষরিক ব্যবহার করা।

import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

const ORANGE = css`orange`;

@customElement('my-element')
class MyElement extends LitElement {
  static styles = [
    css`
      #orange {
        color: ${ORANGE};
      }

      #purple {
        color: rebeccapurple;
      }
    `
  ];

  render() {
    return html`
      <div>
        <h1 id="orange">This text is orange</h1>
        <h1 id="purple">This text is rebeccapurple</h1>
      </div>
    `;
  }
}

উপরের উদাহরণ নিম্নলিখিত কাজ করে:

• একটি বাইন্ডিং সহ একটি CSS ট্যাগ করা টেমপ্লেট আক্ষরিক ঘোষণা করে
• আইডি সহ দুটি h1 s এর রঙ সেট করে

আপনি লক্ষ্য করবেন যে টেমপ্লেট এবং সিএসএস id ব্যবহার করছে। DOM এবং শৈলী ডিফল্টরূপে Shadow DOM-এর সাথে স্কোপ করা হয় বলে Lit-এ এটি একটি নিরাপদ জিনিস।

css টেমপ্লেট ট্যাগ ব্যবহার করার সুবিধা:

• প্রতি ক্লাস বনাম উদাহরণ প্রতি একবার পার্স করা হয়েছে
• মন মডিউল পুনর্ব্যবহারযোগ্যতা সঙ্গে বাস্তবায়িত
• সহজে তাদের নিজস্ব ফাইলে শৈলী পৃথক করতে পারেন
• CSS কাস্টম বৈশিষ্ট্য পলিফিলের সাথে সামঞ্জস্যপূর্ণ

অতিরিক্তভাবে, index.html এ <style> ট্যাগটি লক্ষ্য করুন:

<!-- index.html -->
<style>
  h1 {
    color: red !important;
  }
</style>

লিট আপনার উপাদানের শৈলীকে তাদের শিকড় পর্যন্ত বিস্তৃত করবে। এর মানে হল যে শৈলী ভিতরে এবং বাইরে ফুটো হবে না। স্টাইলগুলিকে উপাদানগুলিতে প্রেরণ করতে, লিট টিম CSS কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করার পরামর্শ দেয় কারণ তারা লিট স্টাইল স্কোপিং প্রবেশ করতে পারে।

শৈলী ট্যাগ

আপনার টেমপ্লেটে সহজভাবে <style> ট্যাগ ইনলাইন করাও সম্ভব। ব্রাউজার এই স্টাইল ট্যাগগুলিকে ডিডপ্লিকেট করবে, কিন্তু সেগুলিকে আপনার টেমপ্লেটে রেখে, সেগুলি প্রতি ক্লাসের বিপরীতে কম্পোনেন্ট ইনস্ট্যান্সে পার্স করা হবে যেমন css ট্যাগ করা টেমপ্লেটের ক্ষেত্রে। উপরন্তু, CSSResult এর ব্রাউজার ডিডপ্লিকেশন অনেক দ্রুত।

লিঙ্ক ট্যাগ

আপনার টেমপ্লেটে একটি <link rel="stylesheet"> ব্যবহার করাও শৈলীগুলির জন্য একটি সম্ভাবনা, তবে এটিও সুপারিশ করা হয় না কারণ এটি স্টাইল না করা সামগ্রীর প্রাথমিক ফ্ল্যাশ (FOUC) হতে পারে৷

12. উন্নত বিষয় (ঐচ্ছিক)

এই বিভাগটি উন্নত বিষয়গুলি মোকাবেলা করে এবং Lit এবং প্রতিক্রিয়া বাস্তবায়নের গভীরে যায়। এই বিভাগটি ঐচ্ছিক

JSX এবং টেমপ্লেটিং

লিট এবং ভার্চুয়াল DOM

Lit-html একটি প্রচলিত ভার্চুয়াল DOM অন্তর্ভুক্ত করে না যা প্রতিটি পৃথক নোডকে আলাদা করে। পরিবর্তে এটি ES2015 এর ট্যাগ করা টেমপ্লেট আক্ষরিক বৈশিষ্ট্যের অন্তর্নিহিত কার্যকারিতা বৈশিষ্ট্যগুলি ব্যবহার করে। ট্যাগ করা টেমপ্লেট লিটারাল হল টেমপ্লেট লিটারাল স্ট্রিং যার সাথে ট্যাগ ফাংশন যুক্ত থাকে।

এখানে একটি টেমপ্লেট আক্ষরিক একটি উদাহরণ:

const str = 'string';
console.log(`This is a template literal ${str}`);

এখানে একটি ট্যাগ করা টেমপ্লেট আক্ষরিক একটি উদাহরণ:

const tag = (strings, ...values) => ({strings, values});
const f = (x) => tag`hello ${x} how are you`;
console.log(f('world')); // {strings: ["hello ", " how are you"], values: ["world"]}
console.log(f('world').strings === f(1 + 2).strings); // true

উপরের উদাহরণে, ট্যাগ হল tag ফাংশন এবং f ফাংশন একটি ট্যাগ করা টেমপ্লেটের আক্ষরিক আমন্ত্রণ প্রদান করে।

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

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

আপনি যদি এইচটিএমএল ট্যাগযুক্ত টেম্পলেট লিটারালগুলি প্রতিক্রিয়া বা প্রাক্কের সাথে ব্যবহার শুরু করতে চান তবে লিট টিম htm লাইব্রেরির প্রস্তাব দেয়।

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

লিট & জেএসএক্স + প্রতিক্রিয়া ডোম

জেএসএক্স ব্রাউজারে চলে না এবং পরিবর্তে জেএসএক্সকে জাভাস্ক্রিপ্ট ফাংশন কলগুলিতে রূপান্তর করতে একটি প্রিপ্রোসেসর ব্যবহার করে (সাধারণত বাবেলের মাধ্যমে)।

উদাহরণস্বরূপ, বাবেল এটিকে রূপান্তর করবে:

const element = <div className="title">Hello World!</div>;
ReactDOM.render(element, mountNode);

এর মধ্যে:

const element = React.createElement('div', {className: 'title'}, 'Hello World!');
ReactDOM.render(element, mountNode);

প্রতিক্রিয়া ডোম তারপরে প্রতিক্রিয়া আউটপুট নেয় এবং এটি প্রকৃত ডিওএম - বৈশিষ্ট্য, বৈশিষ্ট্য, ইভেন্ট শ্রোতা এবং সমস্তগুলিতে অনুবাদ করে।

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

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import {html, render} from 'https://cdn.skypack.dev/lit';

      render(
        html`<div>Hello World!</div>`,
        document.querySelector('.root')
      )
    </script>
  </head>
  <body>
    <div class="root"></div>
  </body>
</html>

অধিকন্তু, যেহেতু লিটের টেম্প্লেটিং সিস্টেম, এলআইটি-এইচটিএমএল একটি প্রচলিত ভার্চুয়াল ডিওএম ব্যবহার করে না বরং ডোম এপিআই সরাসরি ব্যবহার করে, লিট 2 এর আকার 5 কেবি মিনিফাইড এবং জিজিপডের অধীনে প্রতিক্রিয়া (2.8 কেবি) + প্রতিক্রিয়া-ডোমের (39.4 কেবি) এর তুলনায় জিজিপডের অধীনে রয়েছে (39.4 কেবি) 40 কেবি মিনিফাইড এবং গিজিপড।

ঘটনা

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

লিট-এইচটিএমএল সরাসরি ডিওএম অ্যাক্সেস করে এবং স্থানীয় ইভেন্টগুলি ব্যবহার করে, তাই ইভেন্ট শ্রোতাদের যুক্ত করা @event-name=${eventNameListener} এর মতোই সহজ} এর অর্থ হ'ল ইভেন্ট শ্রোতার পাশাপাশি ফায়ারিং ইভেন্টগুলি যুক্ত করার জন্য কম রানটাইম পার্সিং করা হয়।

উপাদান এবং প্রপস

প্রতিক্রিয়া উপাদান এবং কাস্টম উপাদান

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

কিছু সুবিধা কাস্টম উপাদানগুলির একটি উপাদান সিস্টেম হিসাবে রয়েছে:

• ব্রাউজারের স্থানীয় এবং কোনও সরঞ্জামের প্রয়োজন হয় না
• innerHTML এবং document.createElement থেকে প্রতিটি ব্রাউজার এপিআইতে ফিট করুন querySelector থেকে ক্রিয়েটেলমেন্ট
• সাধারণত ফ্রেমওয়ার্ক জুড়ে ব্যবহার করা যেতে পারে
• অলসভাবে customElements.define এবং "হাইড্রেট" ডোমের সাথে নিবন্ধিত হতে পারে

কিছু অসুবিধাগুলি কাস্টম উপাদানগুলি প্রতিক্রিয়া উপাদানগুলির সাথে তুলনা করেছে:

• কোনও শ্রেণি সংজ্ঞায়িত না করে কাস্টম উপাদান তৈরি করতে পারে না (এইভাবে কোনও জেএসএক্স-জাতীয় কার্যকরী উপাদান নেই)
• একটি সমাপ্তি ট্যাগ থাকতে হবে
  • দ্রষ্টব্য: বিকাশকারী সুবিধার্থে ব্রাউজার বিক্রেতারা স্ব-ক্লোজিং ট্যাগ স্পেসের জন্য আফসোস করার প্রবণতা সত্ত্বেও নতুন স্পেসগুলিতে স্ব-ক্লোজিং ট্যাগগুলি অন্তর্ভুক্ত না করার প্রবণতা রয়েছে
• ডোম গাছের সাথে একটি অতিরিক্ত নোডের পরিচয় করিয়ে দেয় যা লেআউট সমস্যার কারণ হতে পারে
• জাভাস্ক্রিপ্টের মাধ্যমে অবশ্যই নিবন্ধিত হতে হবে

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

কাস্টম উপাদানগুলিতে ডেটা পাস করা

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

উদাহরণস্বরূপ - নিম্নলিখিত লিটেলমেন্ট সংজ্ঞা দেওয়া:

কোড

// data-test.ts
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('data-test')
class DataTest extends LitElement {
  @property({type: Number})
  num = 0;

  @property({attribute: false})
  data = {a: 0, b: null, c: [html`<div>hello</div>`, html`<div>world</div>`]}

  render() {
    return html`
      <div>num + 1 = ${this.num + 1}</div>
      <div>data.a = ${this.data.a}</div>
      <div>data.b = ${this.data.b}</div>
      <div>data.c = ${this.data.c}</div>`;
  }
}

একটি আদিম প্রতিক্রিয়াশীল সম্পত্তি num সংজ্ঞায়িত করা হয় যা একটি অ্যাট্রিবিউট এর স্ট্রিং মানকে একটি number রূপান্তর করবে এবং তারপরে জটিল ডেটা কাঠামো attribute:false যা লিটের বৈশিষ্ট্য হ্যান্ডলিংকে নিষ্ক্রিয় করে।

এই কাস্টম উপাদানটিতে ডেটা কীভাবে পাস করবেন:

লিট টেমপ্লেটগুলিতে সম্পত্তি বাইন্ডিংগুলি অন্তর্নির্মিত থাকায় কোনও নন-লিট ব্যবহারকারী এই উপাদানটি গ্রাস করতে পারে।

<head>
  <script type="module">
    import './data-test.js'; // loads element definition
    import {html} from './data-test.js';

    const el = document.querySelector('data-test');
    el.data = {
      a: 5,
      b: null,
      c: [html`<div>foo</div>`,html`<div>bar</div>`]
    };
  </script>
</head>
<body>
  <data-test num="5"></data-test>
</body>

জটিল বৈশিষ্ট্যগুলি পাস করা নন-লিট ব্যবহারকারীদের জন্য বিকাশকারীদের অভিজ্ঞতা হ্রাস করতে পারে। কাস্টম উপাদানগুলিতে যাওয়ার আগে প্রায়শই জটিল বৈশিষ্ট্যগুলি ডিকনস্ট্রাক্ট করা যায়। যেমন data-test উপাদানটি data.a এবং data.b গ্রহণের জন্য পৃথক বৈশিষ্ট্য হিসাবে সংশোধন করা যেতে পারে এবং c <data-test> এর সরাসরি শিশু হিসাবে রেন্ডার করা যেতে পারে।

রাষ্ট্র ও জীবনচক্র

অন্যান্য প্রতিক্রিয়া লাইফসাইকেল কলব্যাকস

static getDerivedStateFromProps

প্রপস এবং রাষ্ট্র উভয়ই একই শ্রেণীর বৈশিষ্ট্য হিসাবে লিটের কোনও সমতুল্য নেই

shouldComponentUpdate

• লিট সমতুল্য হওয়া shouldUpdate
• প্রতিক্রিয়াটির বিপরীতে প্রথম রেন্ডারকে কল করা হয়েছে
• প্রতিক্রিয়াটির মতো ফাংশনে একই shouldComponentUpdate

getSnapshotBeforeUpdate

লিট -এ, getSnapshotBeforeUpdate update এবং willUpdate উভয়ের মতোই

willUpdate

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

update

• willUpdate পরে কল
• getSnapshotBeforeUpdate বিপরীতে, render আগে update বলা হয়
• update প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলিতে পরিবর্তনগুলি super.update কল করার আগে পরিবর্তন করা হলে আপডেট চক্রটি পুনরায় ট্রিগার করবেন না
• রেন্ডার আউটপুটটি ডোমের প্রতিশ্রুতিবদ্ধ হওয়ার আগে উপাদানটির চারপাশের ডোম থেকে তথ্য ক্যাপচার করার জন্য ভাল জায়গা
• এই পদ্ধতিটি এসএসআর -তে সার্ভারে কল করা হয় না

অন্যান্য আলোকিত জীবনচক্র কলব্যাক

বেশ কয়েকটি লাইফসাইকেল কলব্যাক রয়েছে যা পূর্ববর্তী বিভাগে উল্লেখ করা হয়নি কারণ তাদের প্রতিক্রিয়া হিসাবে কোনও এনালগ নেই। তারা হল:

attributeChangedCallback

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

adoptedCallback

যখন উপাদানটি একটি নতুন ডকুমেন্টে স্থানান্তরিত করা হয় যেমন HTMLTemplateElement এর documentFragment থেকে মূল document । এই কলব্যাকটিও কাস্টম উপাদানগুলির নির্দিষ্ট অংশের একটি অংশ এবং যখন উপাদানটি নথি পরিবর্তন করে তখন কেবল উন্নত ব্যবহারের ক্ষেত্রে ব্যবহার করা উচিত।

অন্যান্য জীবনচক্র পদ্ধতি এবং বৈশিষ্ট্য

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

updateComplete

এটি এমন একটি Promise যা সমাধান করে যখন উপাদানটি আপডেট এবং রেন্ডার লাইফসাইকেলগুলি অ্যাসিনক্রোনাস হিসাবে আপডেট করা শেষ করে। একটি উদাহরণ:

async nextButtonClicked() {
  this.step++;
  // Wait for the next "step" state to render
  await this.updateComplete;
  this.dispatchEvent(new Event('step-rendered'));
}

getUpdateComplete

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

class MyElement extends LitElement {
  ...
  async getUpdateComplete() {
    await super.getUpdateComplete();
    await this.myChild.updateComplete;
  }
}

performUpdate

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

hasUpdated

এই সম্পত্তিটি true যদি উপাদানটি কমপক্ষে একবার আপডেট করে থাকে।

isConnected

কাস্টম উপাদানগুলির নির্দিষ্ট অংশের একটি অংশ, উপাদানটি বর্তমানে মূল নথি গাছের সাথে সংযুক্ত থাকলে এই সম্পত্তিটি true হবে।

লিট আপডেট লাইফসাইকেল ভিজ্যুয়ালাইজেশন

আপডেট লাইফসাইকেলের 3 টি অংশ রয়েছে:

• প্রাক-আপডেট
• আপডেট
• পোস্ট-আপডেট

ব্যাখ্যা করা হয়নি এমন লাইফসাইকেল কলব্যাকগুলিতে আরও তথ্যের জন্য, উন্নত বিষয়গুলি দেখুন - রাজ্য এবং জীবনচক্র

প্রাক-আপডেট

requestUpdate পরে, একটি নির্ধারিত আপডেটের জন্য অপেক্ষা করা হয়।

আপডেট

পোস্ট-আপডেট

হুকস

কেন হুক

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

এপিআই অনুরোধ হুকস এবং কন্ট্রোলার

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

• index.tsx
  • পাঠ্য রেন্ডার
  • useAPI এর প্রতিক্রিয়া উপস্থাপন
    • ব্যবহারকারী আইডি + ব্যবহারকারীর নাম
    • ত্রুটি বার্তা
      • 404 যখন ব্যবহারকারী 11 এ পৌঁছায় (ডিজাইন দ্বারা)
      • এপিআই ফেচ বাতিল করা হলে ত্রুটি বাতিল করুন
    • লোডিং বার্তা
  • একটি অ্যাকশন বোতাম রেন্ডার করে
    • পরবর্তী ব্যবহারকারী: যা পরবর্তী ব্যবহারকারীর জন্য এপিআই আনবে
    • বাতিল করুন: যা এপিআই আনতে বাতিল করে এবং একটি ত্রুটি প্রদর্শন করে
• useApi.tsx
  • একটি useApi কাস্টম হুক সংজ্ঞায়িত করে
  • অ্যাসিঙ্ক একটি এপিআই থেকে কোনও ব্যবহারকারী অবজেক্ট আনবে
  • নির্গত:
    • ব্যবহারকারীর নাম
    • আনতে লোড হচ্ছে কিনা
    • কোন ত্রুটি বার্তা
    • আনতে বাতিল করার জন্য একটি কলব্যাক
  • বরখাস্ত হলে অগ্রগতিতে আনতে পারে

এখানে লিট + প্রতিক্রিয়াশীল নিয়ামক বাস্তবায়ন রয়েছে।

টেকওয়েজ:

• প্রতিক্রিয়াশীল নিয়ন্ত্রণকারীরা সর্বাধিক কাস্টম হুকের মতো
• কলব্যাক এবং প্রভাবগুলির মধ্যে অ-রেন্ডারযোগ্য ডেটা পাস করা
  • প্রতিক্রিয়া ইউএসইআরইএফ ব্যবহার করে useRef ব্যবহার করে useEffect এবং useCallback মধ্যে ডেটা পাস করতে
  • লিট একটি ব্যক্তিগত শ্রেণীর সম্পত্তি ব্যবহার করে
  • প্রতিক্রিয়া মূলত একটি বেসরকারী শ্রেণীর সম্পত্তির আচরণকে নকল করছে

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

শিশুরা

ডিফল্ট স্লট

যখন এইচটিএমএল উপাদানগুলিকে একটি slot বৈশিষ্ট্য দেওয়া হয় না, তখন সেগুলি ডিফল্ট নামবিহীন স্লটে বরাদ্দ করা হয়। নীচের উদাহরণে, MyApp একটি নামযুক্ত স্লটে একটি অনুচ্ছেদ স্লট করবে। অন্যান্য অনুচ্ছেদটি নামবিহীন স্লটে ডিফল্ট হবে "।

খেলার মাঠ

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`
      <section>
        <div>
          <slot></slot>
        </div>
        <div>
          <slot name="custom-slot"></slot>
        </div>
      </section>
   `;
  }
}

@customElement("my-app")
export class MyApp extends LitElement {
  render() {
    return html`
      <my-element>
        <p slot="custom-slot">
          This paragraph will be placed in the custom-slot!
        </p>
        <p>
          This paragraph will be placed in the unnamed default slot!
        </p>
      </my-element>
   `;
  }
}

ডিফল্ট স্লট একটি খালি পাঠ্য নোডকে একটি অ্যাসাইনেবল নোড হিসাবে গ্রহণ করবে। এটি ডিফল্ট টেম্পলেটগুলির সাথে সমস্যাগুলির কারণ হতে পারে। যেমন <slot><div>default</div><slot> নিম্নলিখিত ক্ষেত্রে পাঠ্যটি প্রদর্শন করবে না: <my-el> </my-el> হিসাবে একটি খালি পাঠ্য নোড রয়েছে।

স্লট আপডেট

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

@customElement("my-element")
export class MyElement extends LitElement {
  onSlotChange(e: Event) {
    const slot = this.shadowRoot.querySelector('slot');
    console.log(slot.assignedNodes({flatten: true}));
  }

  render() {
    return html`
      <section>
        <div>
          <slot @slotchange="{this.onSlotChange}"></slot>
        </div>
      </section>
   `;
  }
}

{flatten: true} কনফিগারেশনটি assignedNodes এবং assignedElements পাস করা হয় কারণ একটি <slot> অন্য <slot> এ প্রজেক্ট করা যেতে পারে এবং ফ্ল্যাটেন নোড প্রক্ষেপণ গাছটিকে সমতল করবে।

Refs

রেফারেন্স জেনারেশন

লিট এবং প্রতিক্রিয়া উভয়ই তাদের render ফাংশনগুলি ডাকা হওয়ার পরে এইচটিএমএলএলমেন্টের একটি রেফারেন্স প্রকাশ করে। তবে এটি পর্যালোচনা করার মতো যে কীভাবে প্রতিক্রিয়া এবং লিট ডোমটি রচনা করে যা পরে লিট @query ডেকোরেটার বা প্রতিক্রিয়া রেফারেন্সের মাধ্যমে ফিরে আসে।

প্রতিক্রিয়া হ'ল একটি কার্যকরী পাইপলাইন যা এইচটিএমএলিমেন্টস নয় এমন প্রতিক্রিয়া উপাদান তৈরি করে। যেহেতু এইচটিএমএলিমেন্ট রেন্ডার করার আগে একটি রেফ ঘোষণা করা হয়, স্মৃতিতে একটি স্থান বরাদ্দ করা হয়। এ কারণেই আপনি null রেফারেন্সের প্রাথমিক মান হিসাবে দেখেন, কারণ প্রকৃত ডিওএম উপাদানটি এখনও তৈরি করা হয়নি (বা রেন্ডার করা) অর্থাত্ useRef(null) ।

রিঅ্যাক্টডম একটি প্রতিক্রিয়া উপাদানকে এইচটিএমএলএলমেন্টে রূপান্তর করার পরে, এটি রিঅ্যাক্টকম্পোনেন্টে ref নামে পরিচিত একটি বৈশিষ্ট্য সন্ধান করে। যদি উপলভ্য হয় তবে রিঅ্যাক্টডম HTMLELEMENT এর ref.current রেফারেন্স রাখে।

লিটলিমেন্ট হুডের নীচে একটি টেম্পলেট উপাদান রচনা করতে লিট-এইচটিএমএল থেকে html টেম্পলেট ট্যাগ ফাংশন ব্যবহার করে। লিটলমেন্ট রেন্ডার করার পরে একটি কাস্টম এলিমেন্টের ছায়া ডোমে টেমপ্লেটের বিষয়বস্তুগুলিকে স্ট্যাম্প করে। শ্যাডো ডোম একটি স্কোপড ডোম গাছ যা একটি ছায়া রুট দ্বারা আবদ্ধ। এরপরে @query ডেকোরেটর সম্পত্তিটির জন্য একটি গেটার তৈরি করে যা মূলত স্কোপড রুটে একটি this.shadowRoot.querySelector সম্পাদন করে।

একাধিক উপাদান জিজ্ঞাসা করুন

নীচের উদাহরণে, @queryAll ডেকোরেটর NodeList হিসাবে ছায়া মূলের দুটি অনুচ্ছেদটি ফিরিয়ে দেবে।

@customElement("my-element")
export class MyElement extends LitElement {
  @queryAll('p')
  paragraphs!: NodeList;

  render() {
    return html`
      <p>Hello, world!</p>
      <p>How are you?</p>
   `;
  }
}

মূলত, @queryAll paragraphs জন্য একটি গেটার তৈরি করে যা this.shadowRoot.querySelectorAll() ফলাফলগুলি প্রদান করে s জাভাস্ক্রিপ্টে, একজন গেটারকে একই উদ্দেশ্য সম্পাদন করার জন্য ঘোষণা করা যেতে পারে:

get paragraphs() {
  return this.renderRoot.querySelectorAll('p');
}

কোয়েরি পরিবর্তনকারী উপাদান

@queryAsync ডেকোরেটারটি এমন একটি নোড পরিচালনা করতে আরও উপযুক্ত যা অন্য উপাদান সম্পত্তির অবস্থার ভিত্তিতে পরিবর্তন করতে পারে।

নীচের উদাহরণে, @queryAsync প্রথম অনুচ্ছেদের উপাদানটি খুঁজে পাবেন। যাইহোক, একটি অনুচ্ছেদ উপাদান কেবল তখনই রেন্ডার করা হবে যখন renderParagraph এলোমেলোভাবে একটি বিজোড় সংখ্যা উত্পন্ন করে। @queryAsync নির্দেশিকা একটি প্রতিশ্রুতি ফিরিয়ে দেবে যা প্রথম অনুচ্ছেদটি উপলব্ধ হলে সমাধান হবে।

@customElement("my-dissappearing-paragraph")
export class MyDisapppearingParagraph extends LitElement {
  @queryAsync('p')
  paragraph!: Promise<HTMLElement>;

  renderParagraph() {
    const randomNumber = Math.floor(Math.random() * 10)
    if (randomNumber % 2 === 0) {
      return "";
    }

    return html`<p>This checkbox is checked!`
  }

  render() {
    return html`
      ${this.renderParagraph()}
   `;
  }
}

মধ্যস্থতা রাষ্ট্র

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

বহিরাগত রাষ্ট্র

লিটের পাশাপাশি রেডাক্স, এমওবিএক্স বা অন্য কোনও রাজ্য পরিচালন গ্রন্থাগার ব্যবহার করা সম্ভব

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

ভাদিনের একটি সিরিজ এখানে একটি আলোকিত উপাদানগুলিতে রেডাক্স কীভাবে লাভ করতে হবে তা ব্যাখ্যা করে।

অ্যাডোব থেকে লিট-এমওবিএক্সের দিকে একবার নজর দিন যাতে কোনও বৃহত স্কেলের সাইট কীভাবে লিটাতে মবএক্সকে লাভ করতে পারে তা দেখতে।

এছাড়াও, বিকাশকারীরা তাদের ওয়েব উপাদানগুলিতে গ্রাফকিউএল কীভাবে অন্তর্ভুক্ত করছে তা দেখতে অ্যাপোলো উপাদানগুলি দেখুন।

নেটিভ ব্রাউজার বৈশিষ্ট্যগুলির সাথে লিট কাজ করে এবং ব্রাউজারের স্কোপের বেশিরভাগ রাজ্য পরিচালনার সমাধানগুলি একটি লিট উপাদানগুলিতে ব্যবহার করা যেতে পারে।

স্টাইলিং

ছায়া DOM

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

ছায়া ডোম সিএসএস স্পেসে নতুন ধারণা এবং নির্বাচকদের পরিচয় করিয়ে দেয়:

:host, :host(:hover), :host([hover]) {
  /* Styles the element in which the shadow root is attached to */
}

slot[name="title"]::slotted(*), slot::slotted(:hover), slot::slotted([hover]) {
  /*
   * Styles the elements projected into a slot element. NOTE: the spec only allows
   * styling the direcly slotted elements. Children of those elements are not stylable.
   */
}

শেয়ারিং শৈলী

লিট css টেম্পলেট ট্যাগের মাধ্যমে CSSTemplateResults আকারে উপাদানগুলির মধ্যে শৈলী ভাগ করে নেওয়া সহজ করে তোলে। যেমন:

// typography.ts
export const body1 = css`
  .body1 {
    ...
  }
`;

// my-el.ts
import {body1} from './typography.ts';

@customElement('my-el')
class MyEl Extends {
  static get styles = [
    body1,
    css`/* local styles come after so they will override bod1 */`
  ]

  render() {
    return html`<div class="body1">...</div>`
  }
}

থিমিং

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

.mdc-textfield-outline {
  border-color: var(--mdc-theme-primary, /* default value */ #...);
}
.mdc-textfield--input {
  caret-color: var(--mdc-theme-primary, #...);
}

এরপরে ব্যবহারকারী কাস্টম সম্পত্তি মান প্রয়োগ করে সাইটের থিমটি পরিবর্তন করবে:

html {
  --mdc-theme-primary: #F00;
}
html[dark] {
  --mdc-theme-primary: #F88;
}

যদি টপ-ডাউন থিমিং একটি আবশ্যক এবং আপনি শৈলীগুলি প্রকাশ করতে অক্ষম হন তবে createRenderRoot this ফিরিয়ে দেওয়ার জন্য ওভাররাইড করে ছায়া ডোমকে অক্ষম করা সর্বদা সম্ভব যা আপনার উপাদানগুলির টেম্পলেটটি নিজেই কাস্টম উপাদানটিতে রেন্ডার করবে বরং একটি ছায়া মূলের পরিবর্তে কাস্টম উপাদানটিতে রেন্ডার করবে কাস্টম উপাদান। এটির সাহায্যে আপনি হারাবেন: স্টাইল এনক্যাপসুলেশন, ডোম এনক্যাপসুলেশন এবং স্লট।

উৎপাদন

IE 11

আপনার যদি আইই 11 এর মতো পুরানো ব্রাউজারগুলি সমর্থন করতে হয় তবে আপনাকে এমন কিছু পলিফিল লোড করতে হবে যা প্রায় আরও 33 কেবি থেকে বেরিয়ে আসে। আরো তথ্য এখানে পাওয়া যাবে.

শর্তাধীন বান্ডিল

লিট দল দুটি পৃথক বান্ডিল পরিবেশন করার পরামর্শ দেয়, একটি আইই 11 এর জন্য এবং একটি আধুনিক ব্রাউজারগুলির জন্য। এর বেশ কয়েকটি সুবিধা রয়েছে:

• ES 6 পরিবেশন করা দ্রুত এবং আপনার বেশিরভাগ ক্লায়েন্টকে পরিবেশন করবে
• স্থানান্তরিত ES 5 উল্লেখযোগ্যভাবে বান্ডিলের আকার বৃদ্ধি করে
• শর্তসাপেক্ষ বান্ডিলগুলি আপনাকে উভয় বিশ্বের সেরা দেয়
  • আইই 11 সমর্থন
  • আধুনিক ব্রাউজারগুলিতে কোনও মন্দা নেই

শর্তসাপেক্ষে পরিবেশন করা বান্ডিল কীভাবে তৈরি করবেন সে সম্পর্কে আরও তথ্য এখানে আমাদের ডকুমেন্টেশন সাইটে পাওয়া যাবে।