ব্যবহার children
const Wrapper = ({children}) => (
<div>
<div>header</div>
<div>{children}</div>
<div>footer</div>
</div>
);
const App = ({name}) => <div>Hello {name}</div>;
const WrappedApp = ({name}) => (
<Wrapper>
<App name={name}/>
</Wrapper>
);
render(<WrappedApp name="toto"/>,node);
এটি transclusion
কৌণিক হিসাবেও পরিচিত ।
children
প্রতিক্রিয়াটির একটি বিশেষ প্রপ এবং এটি আপনার উপাদানগুলির ট্যাগগুলির ভিতরে যা রয়েছে তা অন্তর্ভুক্ত থাকবে (এখানে <App name={name}/>
ভিতরে রয়েছে Wrapper
, তাই এটিchildren
মনে রাখবেন যে আপনার অগত্যা ব্যবহারের প্রয়োজন নেই children
যা কোনও উপাদানগুলির জন্য অনন্য এবং আপনি চাইলে সাধারণ প্রপগুলিও ব্যবহার করতে পারেন বা প্রপস এবং শিশুদের মিশ্রণ করতে পারেন:
const AppLayout = ({header,footer,children}) => (
<div className="app">
<div className="header">{header}</div>
<div className="body">{children}</div>
<div className="footer">{footer}</div>
</div>
);
const appElement = (
<AppLayout
header={<div>header</div>}
footer={<div>footer</div>}
>
<div>body</div>
</AppLayout>
);
render(appElement,node);
এটি অনেকগুলি ব্যবহারের ক্ষেত্রে সহজ এবং সূক্ষ্ম এবং আমি বেশিরভাগ ভোক্তা অ্যাপ্লিকেশানের জন্য এটির পরামর্শ দিই।
প্রপস রেন্ডার
কোনও উপাদানকে রেন্ডার ফাংশনগুলি সরবরাহ করা সম্ভব, এই প্যাটার্নটি সাধারণত বলা হয় render prop
এবং children
প্রপাকটি প্রায়শই সেই কলব্যাক সরবরাহ করতে ব্যবহৃত হয়।
এই প্যাটার্নটি সত্যিই বিন্যাসের জন্য বোঝানো হয়নি। মোড়কের উপাদানটি সাধারণত কিছু স্থিতি ধরে রাখতে ও পরিচালনা করতে এবং এর রেন্ডার ফাংশনগুলিতে ইনজেক্ট করতে ব্যবহৃত হয়।
পাল্টা উদাহরণ:
const Counter = () => (
<State initial={0}>
{(val, set) => (
<div onClick={() => set(val + 1)}>
clicked {val} times
</div>
)}
</State>
);
আপনি আরও অভিনব এবং এমনকি একটি অবজেক্ট প্রদান করতে পারেন
<Promise promise={somePromise}>
{{
loading: () => <div>...</div>,
success: (data) => <div>{data.something}</div>,
error: (e) => <div>{e.message}</div>,
}}
</Promise>
নোট করুন আপনার অগত্যা ব্যবহার করার প্রয়োজন নেই children
, এটি স্বাদ / এপিআইয়ের বিষয়।
<Promise
promise={somePromise}
renderLoading={() => <div>...</div>}
renderSuccess={(data) => <div>{data.something}</div>}
renderError={(e) => <div>{e.message}</div>}
/>
আজকের হিসাবে, অনেক লাইব্রেরি রেন্ডার প্রপস ব্যবহার করছে (প্রতিক্রিয়া প্রসঙ্গে, প্রতিক্রিয়া-গতি, অ্যাপোলো ...) কারণ লোকেরা এইপিআইটির এইচওসি-র চেয়ে আরও সহজ খুঁজে পেতে পারে। রিঅ্যাক্ট-পাওয়ারপ্লাগ হ'ল সরল রেন্ডার-প্রোপ উপাদানগুলির একটি সংগ্রহ। প্রতিক্রিয়া-গ্রহণ আপনাকে রচনা করতে সহায়তা করে।
উচ্চতর-আদেশের উপাদানগুলি (এইচওসি)।
const wrapHOC = (WrappedComponent) => {
class Wrapper extends React.PureComponent {
render() {
return (
<div>
<div>header</div>
<div><WrappedComponent {...this.props}/></div>
<div>footer</div>
</div>
);
}
}
return Wrapper;
}
const App = ({name}) => <div>Hello {name}</div>;
const WrappedApp = wrapHOC(App);
render(<WrappedApp name="toto"/>,node);
একটি উচ্চ-অর্ডার উপাদান / এইচওসি সাধারণত একটি ফাংশন যা কোনও উপাদান নেয় এবং একটি নতুন উপাদান দেয় returns
উচ্চতর-অর্ডার উপাদান ব্যবহার করা children
বা ব্যবহারের চেয়ে আরও বেশি পারফরম্যান্স হতে পারে render props
, কারণ মোড়কটির সাথে রেন্ডারিংয়ের এক ধাপ এগিয়ে শর্ট সার্কিট করার ক্ষমতা থাকতে পারে shouldComponentUpdate
।
এখানে আমরা ব্যবহার করছি PureComponent
। অ্যাপটি পুনরায় রেন্ডারিংয়ের WrappedApp
সময়, সময়ের সাথে সাথে যদি নামের প্রপ পরিবর্তন হয় না, তবে মোড়কের কাছে "আমার রেন্ডার করার দরকার নেই কারণ প্রপস (আসলে, নামটি) আগের মত একই ছিল" say children
উপরোক্ত ভিত্তিক সমাধানের সাথে , এমনকি মোড়ক থাকলেও PureComponent
, এটি এমনটি নয় কারণ পিতামাতার রেন্ডারগুলির সময়কালে বাচ্চাদের উপাদানটি পুনরায় তৈরি করা হয়, যার অর্থ মোড়কযুক্ত উপাদানটি শুদ্ধ থাকলেও মোড়ক সম্ভবত সর্বদা পুনরায় রেন্ডার করে। একটি ব্যাবেল প্লাগইন রয়েছে যা এটি হ্রাস করতে এবং children
সময়ের সাথে একটি ধ্রুবক উপাদান নিশ্চিত করতে সহায়তা করে ।
উপসংহার
উচ্চ-অর্ডার উপাদানগুলি আপনাকে আরও ভাল পারফরম্যান্স দিতে পারে। এটি এত জটিল নয় তবে এটি অবশ্যই প্রথমে বন্ধুত্বপূর্ণ দেখাচ্ছে।
এটি পড়ার পরে আপনার পুরো কোডবেসটি HOC এ স্থানান্তর করবেন না। কেবল মনে রাখবেন যে আপনার অ্যাপ্লিকেশনটির গুরুতর পথে আপনি পারফরম্যান্সের কারণে রানটাইম মোড়কের পরিবর্তে এইচওসি ব্যবহার করতে চাইতে পারেন, বিশেষত যদি একই মোড়কটিকে অনেকবার ব্যবহার করা হয় তবে এটিকে এইচওসি হিসাবে বিবেচনা করা উপযুক্ত।
রেডাক্স প্রথমে একটি রানটাইম মোড়ক ব্যবহার করে <Connect>
এবং পরে connect(options)(Comp)
কার্যকারণের কারণে এইচওসি-তে স্যুইচ করা হয় (ডিফল্টরূপে, মোড়ক বিশুদ্ধ এবং ব্যবহারযোগ্য shouldComponentUpdate
)। এই উত্তরে আমি যেটি হাইলাইট করতে চেয়েছিলাম তার এটি নিখুঁত চিত্রণ।
নোট করুন যদি কোনও উপাদানটির রেন্ডার-প্রোপ এপিআই থাকে, তবে তার উপরে একটি এইচওসি তৈরি করা সাধারণত সহজ, সুতরাং আপনি যদি কোনও লিবিব লেখক হন তবে আপনাকে প্রথমে রেন্ডার প্রোপ এপিআই লিখতে হবে এবং শেষ পর্যন্ত একটি এইচওসি সংস্করণ সরবরাহ করা উচিত। অ্যাপোলো <Query>
রেন্ডার-প্রোপ উপাদানটি graphql
ব্যবহার করে এবং এইচওসি এটি ব্যবহার করে।
ব্যক্তিগতভাবে, আমি উভয়ই ব্যবহার করি তবে সন্দেহ হলে আমি এইচওসিগুলিকে পছন্দ করি কারণ:
- প্রপস
compose(hoc1,hoc2)(Comp)
রেন্ডার তুলনায় এগুলি রচনা করা আরও মূ more়
- এটি আমার আরও ভাল পারফরম্যান্স দিতে পারে
- আমি এই স্টাইল প্রোগ্রামিংয়ের সাথে পরিচিত
আমি আমার পছন্দসই সরঞ্জামগুলির HOC সংস্করণ ব্যবহার / তৈরি করতে দ্বিধা করি না:
- প্রতিক্রিয়া
Context.Consumer
কমপ্লেক্স
- unstated এর
Subscribe
- ব্যবহার
graphql
অ্যাপোলোর পরিকল্পিত পরিবর্তে Query
ঠেকনা রেন্ডার
আমার মতে, কখনও কখনও রেন্ডারগুলি কোডটি আরও বেশি পঠনযোগ্য করে তোলে, কখনও কখনও কম ... আমি আমার প্রতিবন্ধকতাগুলি অনুসারে সবচেয়ে ব্যবহারিক সমাধানটি ব্যবহার করার চেষ্টা করি। কখনও কখনও পাঠযোগ্যতা পারফরম্যান্স চেয়ে গুরুত্বপূর্ণ, কখনও কখনও। বুদ্ধিমানের সাথে চয়ন করুন এবং সমস্ত কিছু রেন্ডার-প্রপসগুলিতে রূপান্তরিত করার 2018 ট্রেন্ডটি বিনীতভাবে অনুসরণ করবেন না।