اجزای مرتبه بالاتر (HOC) در React: راهنمای مبتدیان

عکس پروفایل CodeBucks Hacker Noon

@کدبانکCodeBucks

کمک به شما برای یادگیری کد! در اینجا می توانید آموزش های مربوط به توسعه وب را پیدا کنید. کدگذاری را ادامه دهید …

وقتی صحبت از مباحث پیشرفته در React می شود. حتماً در مورد HOC (م Orderلفه سفارش بالاتر) شنیده اید. اکنون این HOC برای یادگیری چندان پیچیده نیست اما با گرفتن مثال پیچیده از یادگیری مستقیم آن اجتناب کنید.

سعی خواهم کرد که آن را تا حد ممکن ساده کنم.

اگر تماشای ویدیو را ترجیح می دهید ، روی پیوند زیر کلیک کنید.

https://www.youtube.com/watch؟v=kdaqsbEu0bQ

حالا اول از همه بیایید ببینیم HOC چه نوع مشکلی را حل می کند؟

خوب ، گاهی اوقات ما دو م componentsلفه مختلف داریم که منطق یکسانی را اجرا می کنند ، مانند:

همانطور که در زیر می بینید ،

اکنون برای هر دوی این م componentsلفه ها منطق مشابه شمارنده دارند.

حال اجازه دهید تعریف HOC را که در ReactJS.Org ذکر شده است ، ببینیم

یک م componentلفه مرتبه بالاتر (HOC) یک تکنیک پیشرفته در React برای استفاده مجدد از منطق م componentلفه است. HOC ها به خودی خود بخشی از React API نیستند. آنها الگویی هستند که از طبیعت ترکیبی React بیرون می آیند.

همانطور که در بالا ذکر شد ، ما می توانیم منطق م ofلفه را در HOC منفرد پیاده سازی کنیم و سپس می توانیم از آن در م componentsلفه های مورد نیاز استفاده کنیم.

بیایید ببینیم که چگونه این HOC الگویی است که از طبیعت ترکیبی React بیرون می آید و بخشی از React API نیست.

import React, { Component } from "react";

const HOC = (Component, data) = {

سئو PBN | خبر های جدید سئو و هک و سرور