ОПТИМІЗАЦІЯ ПРОДУКТИВНОСТІ РІШЕНЬ ПОБУДОВАНИХ ЗА ДОПОМОГОЮ БІБЛІОТЕК REACTJS ТА D3
DOI:
https://doi.org/10.30977/BUL.2219-5548.2024.104.1.15Ключові слова:
ReactJS, React, D3, Web додаток, оптимізація, Javascript, рендерінг, мемоїзація, хуки, компонентАнотація
У статті виконано аналіз продуктивності React компонентів стосовно розробки та використання компонента що візуалізує графік, дані якого змінюються у реальному часі. Проаналізовано актуальні поточні рішення щодо оптимізації React компонентів. Встановлено що ці шляхи лише частково вирішують зазначену проблему. Знайдено альтернативний шлях мінімізації рендерів компонента в умовах інтеграції з бібліотекою D3. Надано неоптимізовану версію компоненту. Проведено його оптимізацію за допомогою розробленого методу. Проведено порівняння роботи обох версій. Експериментально доведено ефективність запропонованого методу щодо оптимізації та надано код й графіки.
Посилання
Adopting D3 in React apps. Retrived from: https://rajeshnaroth.medium.com/adopting-d3-in-react-apps-a6237a61b59f (accessed: 28.02.2024).
React.js + D3.js. 2019. Retrived from: https://2019.wattenberger.com/blog/react-and-d3 (accessed: 28.02.2024).
D3.js with React.js: An 8-step comprehensive manual. 2021. Retrived from: https://blog.griddynamics.com/using-d3-js-with-react-js-an-8-step-comprehensive-manual/ (accessed: 28.02.2024).
Optymizatsiia produktyvnosti v React-zastosunku. [Optimizing performance in a Re-act application]. Retrived from: https://dou.ua/forums/topic/45406/ (accessed: 28.02.2024).
Optymizatsiia produktyvnosti React dodatkiv. [Optimizing the performance of React applica-tions]. Retrived from: https://www.linkedin.com/pulse/%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D1%96-react-%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D1%96%D0%B2-yevhen-rudofylov-gwwve/ (accessed: 28.02.2024).
Optimizing performance in a React app. Retrived from: https://blog.logrocket.com/optimizing-performance-react-app/ (accessed: 28.02.2024).
API-dovidnyk hukiv [Hooks API Guide.] Retrived from: https://uk.legacy.reactjs.org/docs/hooksreference.html#useimperativehandle (accessed: 28.02.2024).
