রিঅ্যাক্ট রিকনসিলিয়েশন: পারফরম্যান্সের জন্য ভার্চুয়াল ডম অপ্টিমাইজ করা

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

ভার্চুয়াল ডম বোঝা

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

কেন ভার্চুয়াল ডম ব্যবহার করবেন?

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

রিকনসিলিয়েশন প্রক্রিয়ার ব্যাখ্যা

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

রিকনসিলিয়েশনের মূল ধাপগুলি:

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

ডিফিং অ্যালগরিদমের হিউরিস্টিকস

রিঅ্যাক্টের ডিফিং অ্যালগরিদম রিকনসিলিয়েশন প্রক্রিয়াটি অপ্টিমাইজ করার জন্য কয়েকটি মূল ধারণা ব্যবহার করে:

• ভিন্ন ধরনের দুটি এলিমেন্ট ভিন্ন ট্রি তৈরি করবে: যদি একটি কম্পোনেন্টের রুট এলিমেন্টের ধরন পরিবর্তন হয় (যেমন, একটি <div> থেকে একটি <span>), রিঅ্যাক্ট পুরানো ট্রিটি সম্পূর্ণ আনমাউন্ট করবে এবং নতুন ট্রিটি মাউন্ট করবে।
• ডেভেলপার ইঙ্গিত দিতে পারে কোন চাইল্ড এলিমেন্টগুলি বিভিন্ন রেন্ডারের মধ্যে স্থিতিশীল থাকতে পারে: key প্রপ ব্যবহার করে, ডেভেলপাররা রিঅ্যাক্টকে সনাক্ত করতে সাহায্য করতে পারে কোন চাইল্ড এলিমেন্টগুলি একই অন্তর্নিহিত ডেটার সাথে সম্পর্কিত। তালিকা এবং অন্যান্য ডাইনামিক কন্টেন্ট দক্ষতার সাথে আপডেট করার জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।

রিকনসিলিয়েশন অপ্টিমাইজেশন: সেরা অভ্যাস

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

১. কী (Keys) কার্যকরভাবে ব্যবহার করা

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

উদাহরণ:

এপিআই (API) থেকে আনা ব্যবহারকারীদের একটি তালিকা বিবেচনা করুন:

            const UserList = ({ users }) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

            

              
                Copy
              
            
          

এই উদাহরণে, user.id কী হিসাবে ব্যবহৃত হয়েছে। একটি স্থিতিশীল এবং অনন্য শনাক্তকারী ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ। কী হিসাবে অ্যারের ইনডেক্স ব্যবহার করা এড়িয়ে চলুন, কারণ তালিকাটি পুনর্বিন্যাস করা হলে এটি পারফরম্যান্স সমস্যা তৈরি করতে পারে।

২. React.memo দিয়ে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করা

React.memo একটি হায়ার-অর্ডার কম্পোনেন্ট যা ফাংশনাল কম্পোনেন্টগুলিকে মেমোইজ (memoizes) করে। যদি এর প্রপস পরিবর্তন না হয়, তবে এটি একটি কম্পোনেন্টকে পুনরায় রেন্ডার হওয়া থেকে বিরত রাখে। এটি পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করতে পারে, বিশেষ করে পিওর কম্পোনেন্টগুলির জন্য যা ঘন ঘন রেন্ডার হয়।

উদাহরণ:

            import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent rendered');
  return <div>{data}</div>;
});

export default MyComponent;

            

              
                Copy
              
            
          

এই উদাহরণে, MyComponent শুধুমাত্র তখনই পুনরায় রেন্ডার হবে যদি data প্রপ পরিবর্তন হয়। জটিল অবজেক্ট প্রপস হিসাবে পাস করার সময় এটি বিশেষভাবে কার্যকর। তবে, React.memo দ্বারা সম্পাদিত শ্যালো কম্প্যারিজনের ওভারহেডের বিষয়ে সতর্ক থাকুন। যদি প্রপ কম্প্যারিজনটি কম্পোনেন্টের রি-রেন্ডারিংয়ের চেয়ে বেশি ব্যয়বহুল হয়, তবে এটি উপকারী নাও হতে পারে।

৩. useCallback এবং useMemo হুক ব্যবহার করা

useCallback এবং useMemo হুকগুলি চাইল্ড কম্পোনেন্টগুলিতে ফাংশন এবং জটিল অবজেক্ট প্রপস হিসাবে পাস করার সময় পারফরম্যান্স অপ্টিমাইজ করার জন্য অপরিহার্য। এই হুকগুলি ফাংশন বা মানকে মেমোইজ করে, চাইল্ড কম্পোনেন্টগুলির অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করে।

useCallback উদাহরণ:

            import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

export default ParentComponent;

            

              
                Copy
              
            
          

এই উদাহরণে, useCallback handleClick ফাংশনটিকে মেমোইজ করে। useCallback ছাড়া, ParentComponent এর প্রতিটি রেন্ডারে একটি নতুন ফাংশন তৈরি হবে, যার ফলে ChildComponent এর প্রপস যৌক্তিকভাবে পরিবর্তন না হলেও এটি পুনরায় রেন্ডার হবে।

useMemo উদাহরণ:

            import React, { useMemo } from 'react';

const ParentComponent = ({ data }) => {
  const processedData = useMemo(() => {
    // Perform expensive data processing
    return data.map(item => item * 2);
  }, [data]);

  return <ChildComponent data={processedData} />;
};

export default ParentComponent;

            

              
                Copy
              
            
          

এই উদাহরণে, useMemo ব্যয়বহুল ডেটা প্রসেসিংয়ের ফলাফলকে মেমোইজ করে। processedData মানটি কেবল তখনই পুনরায় গণনা করা হবে যখন data প্রপ পরিবর্তন হবে।

৪. ShouldComponentUpdate প্রয়োগ করা (ক্লাস কম্পোনেন্টের জন্য)

ক্লাস কম্পোনেন্টগুলির জন্য, আপনি shouldComponentUpdate লাইফসাইকেল মেথডটি ব্যবহার করে নিয়ন্ত্রণ করতে পারেন কখন একটি কম্পোনেন্ট পুনরায় রেন্ডার হওয়া উচিত। এই মেথডটি আপনাকে বর্তমান এবং পরবর্তী প্রপস এবং স্টেট ম্যানুয়ালি তুলনা করতে দেয় এবং কম্পোনেন্ট আপডেট করা উচিত হলে true অথবা অন্যথায় false রিটার্ন করতে দেয়।

উদাহরণ:

            import React from 'react';

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Compare props and state to determine if an update is needed
    if (nextProps.data !== this.props.data) {
      return true;
    }
    return false;
  }

  render() {
    console.log('MyComponent rendered');
    return <div>{this.props.data}</div>;
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

তবে, সাধারণত ভালো পারফরম্যান্স এবং পঠনযোগ্যতার জন্য হুক (React.memo, useCallback, useMemo) সহ ফাংশনাল কম্পোনেন্ট ব্যবহার করার পরামর্শ দেওয়া হয়।

৫. রেন্ডারে ইনলাইন ফাংশন সংজ্ঞা এড়ানো

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

খারাপ অভ্যাস:

            const MyComponent = () => {
  return <button onClick={() => console.log('Clicked')}>Click me</button>;
};

            

              
                Copy
              
            
          

ভালো অভ্যাস:

            import React, { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <button onClick={handleClick}>Click me</button>;
};

            

              
                Copy
              
            
          

৬. স্টেট আপডেট ব্যাচিং করা

রিঅ্যাক্ট একাধিক স্টেট আপডেটকে একটি একক রেন্ডার সাইকেলে ব্যাচ করে। এটি ডম আপডেটের সংখ্যা কমিয়ে পারফরম্যান্স উন্নত করতে পারে। তবে, কিছু ক্ষেত্রে, আপনাকে ReactDOM.flushSync ব্যবহার করে স্পষ্টভাবে স্টেট আপডেট ব্যাচ করতে হতে পারে (সতর্কতার সাথে ব্যবহার করুন, কারণ এটি কিছু পরিস্থিতিতে ব্যাচিংয়ের সুবিধাগুলি বাতিল করতে পারে)।

৭. অপরিবর্তনীয় ডেটা স্ট্রাকচার ব্যবহার করা

অপরিবর্তনীয় ডেটা স্ট্রাকচার ব্যবহার করলে প্রপস এবং স্টেটের পরিবর্তন সনাক্ত করার প্রক্রিয়াটি সহজ হতে পারে। অপরিবর্তনীয় ডেটা স্ট্রাকচারগুলি নিশ্চিত করে যে পরিবর্তনগুলি বিদ্যমান অবজেক্টগুলিকে পরিবর্তন করার পরিবর্তে নতুন অবজেক্ট তৈরি করে। এটি সমতার জন্য অবজেক্টগুলির তুলনা করা এবং অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করা সহজ করে তোলে।

Immutable.js বা Immer-এর মতো লাইব্রেরিগুলি আপনাকে অপরিবর্তনীয় ডেটা স্ট্রাকচারের সাথে কার্যকরভাবে কাজ করতে সাহায্য করতে পারে।

৮. কোড স্প্লিটিং

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

উদাহরণ:

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
};

            

              
                Copy
              
            
          

৯. ইমেজ অপ্টিমাইজেশন

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

• ইমেজ কম্প্রেস করুন: গুণমান নষ্ট না করে ইমেজ কম্প্রেস করতে TinyPNG বা ImageOptim-এর মতো টুল ব্যবহার করুন।
• সঠিক ফরম্যাট ব্যবহার করুন: ইমেজের বিষয়বস্তুর উপর ভিত্তি করে উপযুক্ত ইমেজ ফরম্যাট বেছে নিন। ফটোগ্রাফের জন্য JPEG উপযুক্ত, আর স্বচ্ছতা সহ গ্রাফিক্সের জন্য PNG ভালো। WebP, JPEG এবং PNG-এর তুলনায় উন্নত কম্প্রেশন এবং গুণমান প্রদান করে।
• রেসপন্সিভ ইমেজ ব্যবহার করুন: ব্যবহারকারীর স্ক্রিনের আকার এবং ডিভাইসের উপর ভিত্তি করে বিভিন্ন আকারের ইমেজ পরিবেশন করুন। <picture> এলিমেন্ট এবং <img> এলিমেন্টের srcset অ্যাট্রিবিউট রেসপন্সিভ ইমেজ প্রয়োগ করতে ব্যবহার করা যেতে পারে।
• ইমেজ লেজি লোড করুন: ইমেজগুলি কেবল তখনই লোড করুন যখন সেগুলি ভিউপোর্টে দৃশ্যমান হয়। এটি প্রাথমিক লোডের সময় কমায় এবং অ্যাপ্লিকেশনের অনুভূত পারফরম্যান্স উন্নত করে। react-lazyload-এর মতো লাইব্রেরিগুলি লেজি লোডিং বাস্তবায়নকে সহজ করতে পারে।

১০. সার্ভার-সাইড রেন্ডারিং (SSR)

সার্ভার-সাইড রেন্ডারিং (SSR) হল সার্ভারে রিঅ্যাক্ট অ্যাপ্লিকেশন রেন্ডার করা এবং প্রি-রেন্ডার করা HTML ক্লায়েন্টের কাছে পাঠানো। এটি প্রাথমিক লোডের সময় এবং সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO) উন্নত করতে পারে, যা বিশ্বব্যাপী বৃহত্তর দর্শকদের কাছে পৌঁছানোর জন্য বিশেষভাবে উপকারী।

Next.js এবং Gatsby-এর মতো ফ্রেমওয়ার্কগুলি SSR-এর জন্য বিল্ট-ইন সমর্থন প্রদান করে এবং এটি বাস্তবায়নকে সহজ করে তোলে।

১১. ক্যাশিং কৌশল

ক্যাশিং কৌশল প্রয়োগ করলে সার্ভারে অনুরোধের সংখ্যা কমিয়ে রিঅ্যাক্ট অ্যাপ্লিকেশনের পারফরম্যান্স উল্লেখযোগ্যভাবে উন্নত করা যায়। ক্যাশিং বিভিন্ন স্তরে প্রয়োগ করা যেতে পারে, যার মধ্যে রয়েছে:

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

১২. পর্যবেক্ষণ এবং প্রোফাইলিং

নিয়মিতভাবে আপনার রিঅ্যাক্ট অ্যাপ্লিকেশন পর্যবেক্ষণ এবং প্রোফাইল করলে পারফরম্যান্সের বাধা এবং উন্নতির ক্ষেত্রগুলি সনাক্ত করতে সাহায্য করতে পারে। আপনার অ্যাপ্লিকেশনের পারফরম্যান্স বিশ্লেষণ করতে এবং ধীর গতির কম্পোনেন্ট বা অদক্ষ কোড সনাক্ত করতে React Profiler, Chrome DevTools, এবং Lighthouse-এর মতো টুল ব্যবহার করুন।

উপসংহার

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