کاربرد pure component در ریکت چیست؟

منتشر شده در | | بدون نظر
کاربرد pure components در ریکت چیست؟
نویسنده: علیرضا کشاورز زمان خواندن: ۴ دقیقه

اگه شما با مفهوم pure component آشنایی ندارید و نمیدونید چه کاربردی داره، جای خوبی اومدید! پس با من همراه باشید.

اصلا pure component چیه؟

در واقع pure component نوع خاصی از کامپوننت در ریکت هست که با استفاده از مقایسه سطحی props و state عملکرد رندر رو بهینه میکنه، در واقع بهتر بگم تا زمانی که مقدار state و props تغییر نکنه و دارای مقدار یکسان باشه، کامپوننت دوباره  رندر نمیشه!

React.PureComponent جایگزینی برای کلاس React.Component هست و همون کارهای کلاس component رو انجام و گسترش میده، بهتر بگم رفتار دقیقا مشابه ای داره اما با این تفاوت که متد shouldComponentUpdate رو برای شما مدیریت میکنه!

نحوه مقایسه سطحی

وقتی pureComponent یک پراپس جدید دریافت کرد یا state آپدیت شد، ریکت به طور خودکار یک مقایسه سطحی بین مقادیر جدید و قدیم props و state انجام میده و چک میکنه آیا بین مقادیر جدید و قدیم تقاوتی وجود داره یا نه! اگر تفاوتی وجود نداشت ریکت از رندر غیر ضروری کامپوننت جلوگیری میکنه.

حالا چرا بهش میگیم مقایسه سطحی؟ چون این مقایسه در سطح بالا انجام میشه و  مقایسه عمقی شکل نمیگیره. ( اشیا و آرایه های تودرتو با هم مقایسه دقیق نمیشن)

مزایای pure component

بهینه سازی عملکرد: این نوع کامپوننت با جلوگیری از چرخه های رندر غیر ضروری هنگامی که هیچ تغییری در props یا state وجود نداره، رندرهای مجدد رو به حداقل میرسونه! و این برای وقتی که ما درگیر کال کردن api یا محاسبات سنگین هستیم مناسبه!

 کد ساده شده: کد رو با کاهش نیاز به بررسی های دستی و بهینه سازی، ساده می کنه و در ادامه ریکت منطق مقایسه رو خودش به طور خودکار انجام میده.

ادغام آسان: شما به راحتی میتونید pure component رو جایگزین component در کدتون بکنید. فقط کافی است React.PureComponent رو بجای React.Component جایگذاری کنیم.

پیاده سازی و مثال

اگه میخواهید از جزپیات بیشتری آگاه بشید میتونید خروجی دو کد زیر رو بررسی و مقایسه کنید.

لاگ گرفتن به عهده خودتون !

Regular component

import React, { Component } from 'react';

export default class App extends Component {
constructor() {
super();
this.state = {
counter: 0
};
}

componentDidMount() {
setInterval(() => {
console.log('Interval invoked');
this.setState({
counter: this.state.counter
});
}, 3000);
}

componentDidUpdate() {
console.log('App updated');
}

render() {
console.log('Render invoked');
return (
<div>
<h2>{this.state.counter}</h2>
</div>
);
}
}

pure component

import React, { PureComponent } from 'react';
export default class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      counter: 0
    };
  }
  componentDidMount() {
    setInterval(() => {
      console.log('Interval invoked');
      this.setState({
        counter: this.state.counter
      });
    }, 1000);
  }
  componentDidUpdate() {
    console.log('App updated');
  }
  render() {
    console.log('Render invoked');
    return (
      <div>
        <h2>{this.state.counter}</h2>
      </div>
    );
  }
}

مطالب پیشنهادی

تفاوت useEffect و useLayoutEffect در ریکت آشنایی با Conditional Rendering | رندر شرطی در ریکت

دیدگاهتان را بنویسید