আপনি জেএসএক্স প্রপসগুলিতে কেন ইনলাইন তীর ফাংশন ব্যবহার করবেন না
জেএসএক্সে তীর ফাংশন বা বাঁধাই ব্যবহার করা একটি খারাপ অনুশীলন যা কর্মক্ষমতা ক্ষতি করে, কারণ প্রতিটি রেন্ডারে ফাংশনটি পুনরায় তৈরি করা হয়।
যখনই কোনও ফাংশন তৈরি করা হয়, পূর্ববর্তী ফাংশনটি আবর্জনা সংগ্রহ করা হয়। অনেক উপাদান পুনরায় সরবরাহ করা অ্যানিমেশনগুলিতে জাঙ্ক তৈরি করতে পারে।
একটি ইনলাইন তীর ফাংশন PureComponentব্যবহারের shallowCompareফলে এবং উপাদানগুলি যে shouldComponentUpdateপদ্ধতিতে ব্যবহার করে যাইহোক রেন্ডার করতে পারে। যেহেতু তীর ফাংশন প্রপ প্রতিবার পুনরায় তৈরি করা হয়েছে, অগভীর তুলনা এটিকে প্রপতে পরিবর্তন হিসাবে চিহ্নিত করবে এবং উপাদানটি পুনরায় সরবরাহ করবে।
আপনি নীচের 2 টি উদাহরণে দেখতে পারেন - যখন আমরা ইনলাইন তীর ফাংশনটি ব্যবহার করি, <Button> প্রতিটি সময় উপাদানটি পুনরায় সরবরাহ করা হয় (কনসোলটি 'রেন্ডার বোতাম' পাঠ্য দেখায়) shows
উদাহরণ 1 - ইনলাইন হ্যান্ডলার ছাড়াই পিওরকমম্পোনেন্ট
class Button extends React.PureComponent {
render() {
const { onClick } = this.props;
console.log('render button');
return (
<button onClick={ onClick }>Click</button>
);
}
}
class Parent extends React.Component {
state = {
counter: 0
}
onClick = () => this.setState((prevState) => ({
counter: prevState.counter + 1
}));
render() {
const { counter } = this.state;
return (
<div>
<Button onClick={ this.onClick } />
<div>{ counter }</div>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>
উদাহরণ 2 - ইনলাইন হ্যান্ডলার সহ নির্ভেজাল অংশ
class Button extends React.PureComponent {
render() {
const { onClick } = this.props;
console.log('render button');
return (
<button onClick={ onClick }>Click</button>
);
}
}
class Parent extends React.Component {
state = {
counter: 0
}
render() {
const { counter } = this.state;
return (
<div>
<Button onClick={ () => this.setState((prevState) => ({
counter: prevState.counter + 1
})) } />
<div>{ counter }</div>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>
বিন্যাস পদ্ধতিতে thisতীর ফাংশনটি অন্তর্ভুক্ত না করে
পদ্ধতিটি নিজেই কনস্ট্রাক্টারে আবদ্ধ করা:
class Button extends React.Component {
constructor(props, context) {
super(props, context);
this.cb = this.cb.bind(this);
}
cb() {
}
render() {
return (
<button onClick={ this.cb }>Click</button>
);
}
}
একটি তীর ফাংশন সহ প্রস্তাব-শ্রেণি-ক্ষেত্রগুলি ব্যবহার করে একটি পদ্ধতি বাঁধাই । এটি একটি পর্যায় 3 প্রস্তাবনা হিসাবে, আপনাকে স্টেজ 3 প্রিসেট যুক্ত করতে হবে বা শ্রেণীর বৈশিষ্ট্যগুলি আপনার বাবেল কনফিগারেশনে রূপান্তর করতে হবে।
class Button extends React.Component {
cb = () => { // the class property is initialized with an arrow function that binds this to the class
}
render() {
return (
<button onClick={ this.cb }>Click</button>
);
}
}
অভ্যন্তরীণ কলব্যাক সহ ফাংশন উপাদান
যখন আমরা কোনও ফাংশন উপাদানটির অভ্যন্তরে কোনও অভ্যন্তরীণ ফাংশন (উদাহরণস্বরূপ ইভেন্ট হ্যান্ডলার) তৈরি করি, তখন প্রতিটি উপাদানটি রেন্ডার করার পরে ফাংশনটি পুনরায় তৈরি করা হবে। যদি ফাংশনটি কোনও শিশু উপাদানগুলিতে প্রপস হিসাবে (বা প্রসঙ্গের মাধ্যমে) পাস করা হয় (Button এই ক্ষেত্রে) সেই শিশুটিও আবার রেন্ডার করবে।
উদাহরণ 1 - অভ্যন্তরীণ কলব্যাক সহ ফাংশন উপাদান:
const { memo, useState } = React;
const Button = memo(({ onClick }) => console.log('render button') || (
<button onClick={onClick}>Click</button>
));
const Parent = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
return (
<div>
<Button onClick={increment} />
<div>{counter}</div>
</div>
);
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
এই সমস্যাটি সমাধান করার জন্য, আমরা হুক দিয়ে কলব্যাকটি useCallback()গুটিয়ে রাখতে পারি , এবং নির্ভরতাগুলি খালি অ্যারেতে সেট করতে পারি।
নোট:useState উত্পন্ন ফাংশন একটি আপডেটার ফাংশন, যা বর্তমান রাষ্ট্র উপলব্ধ গ্রহণ করে। এইভাবে, আমাদের বর্তমান রাষ্ট্রের নির্ভরতা নির্ধারণ করার দরকার নেই useCallback।
উদাহরণ 2 - অভ্যন্তরীণ কলব্যাকের সাথে ফাংশন উপাদানটি ব্যবহারের কলব্যাকের সাথে আবৃত:
const { memo, useState, useCallback } = React;
const Button = memo(({ onClick }) => console.log('render button') || (
<button onClick={onClick}>Click</button>
));
const Parent = () => {
const [counter, setCounter] = useState(0);
const increment = useCallback(() => setCounter(counter => counter + 1), []);
return (
<div>
<Button onClick={increment} />
<div>{counter}</div>
</div>
);
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>