Англійський словник для компілятора React

Компілятор React (раніше відомий як React Forget) є одним з найважливіших додатків до екосистеми React за останні роки. Він автоматично оптимізує компоненти React і виключає необхідність ручного виклику useMemo і useCallback. Оскільки він переходить у більш широке прийняття, розробникам React потрібен словник, щоб обговорити його в переглядах коду, командних зустрічах і конференційних розмовах.

Ключовий словник

** Автоматичне запам’ ятовування ** Автоматичне запам’ ятовування — це основна функція компілятора React: він аналізує ваші компоненти і гачки, визначає, які значення і функції слід запам’ ятовувати, і автоматично застосовує це запам’ ятовування. Розробники кажуть, що компілятор «застосовує», «обробляє» або «виконує» автоматичну мемоізацію.

• Приклад: « При ввімкненій автоматичній запам’ ятовці ми вилучили всі написані від руки виклики useMemo у компоненті, і компілятор обробляє їх правильно. » *

Реагувати Забути React Forget — початкова внутрішня назва проекту React Compiler на Meta. Він досі часто використовується на конференціях та в блогах, особливо в обговореннях історії компілятора. Розробники можуть сказати «це був React Forget» або «проект раніше відомий як React Forget» Приклад: “Компілятор React є тим, що ми публічно називаємо тим, що було внутрішньо React Forget — метою завжди було зробити вручну запам’ятовування непотрібним.”

** Директиви компілятора ** Директиви компілятора — це рядкові літерали, які розташовуються у верхній частині файла або функції для керування поведінкою компілятора. "use memo" включає компонент до компіляції; "use no memo" явно виключає його з компіляції. Розробники «додають», «застосовують» або «використовують» директиви. Приклад: “Я додав 'use no memo' в верхній частині компонента анімації, тому що він використовує сторонню бібліотеку, яка порушує Правила React.”

** Правила реакції ** Правила React — це обмеження, яких повинні дотримуватися компоненти і гачки, щоб компілятор міг безпечно оптимізувати їх — наприклад, не мутувати props, викликати гачки на верхньому рівні, і не покладатися на посилання на ідентичність об’єктів між відтвореннями. Компілятор «примушує», «перевіряє» або «перевіряє» ці правила.

• Приклад: « Компілятор позначив порушення Правил React, оскільки компонент змінював об’ єкт Prop безпосередньо, замість створення нового об’ єкта. » *

** useMemo / useCallback Elimination ** Однією з головних переваг компілятора є те, що розробникам більше не потрібно вручну обгортати значення в useMemo або функції в useCallback. Компілятор «виключає необхідність», «вилучає вимоги до», або «збільшує» ці гачки. Приклад: “Після вмикання компілятора, ми запустили codemod, щоб вилучити всі непотрібні useMemo і useCallback обгортки, які компілятор тепер обробляє автоматично.”

** Вивід компілятора ** Компілятор перетворює ваші кодові дані JavaScript або TypeScript на оптимізований код. Розробники «перевіряють», «досліджують» або «перевіряють» вивід компілятора, щоб зрозуміти, що компілятор зробив. Ігровий майданчик React DevTools показує вивід компіляції візуально.

• Приклад: « Я перевірив вивід компілятора для цього компонента і побачив, що він створив обгортки пам’ яті навколо трьох дорогих обчислень. » *

** Інтеграція одночасного режиму ** Компілятор React розроблений для роботи з одночасними можливостями React — Suspense, переходами і відкладеними значеннями. Розробники обговорюють «сумісність одночасного режиму», «роботу з одночасними функціями» або «підтримку одночасного відтворення» Приклад: “Автоматичне запам’ятовування компілятора особливо корисне в одночасному режимі, оскільки воно зменшує роботу, яку React виконує під час відкладеного відтворення.”

Включення/виключення Компілятор підтримує поступове прийняття — ви можете обрати певні файли або компоненти, які буде включено до збирання або вилучено з нього. Розробники «включають» компонент або «виключають» файл. Всю програму можна вибрати за допомогою налаштування додатків Babel або SWC.

• Приклад: « Ми виключили компонент застарілих форм, оскільки він використовує застарілий шаблон, який компілятор ще не обробляє належним чином. » *

Фрази і фразеологізми

“ввімкнути компілятор React” Стандартна фраза для додавання додатка компілятора до налаштувань збирання. « Enable » — не « install » або « activate » Приклад: «Ввімкніть компілятор React, додавши додаток Babel до конфігурації збирання і встановивши target для вашої версії React.»

“компонент порушує правила компілятора” Використовується, коли компілятор виявляє порушення правил React і пропускає цей компонент. « Violates » — це стандартне дієслово.

• Приклад: « Компілятор пропустив цей компонент, оскільки він порушує правила компілятора — зокрема, він читає з референції під час відтворення. » *

** “перевірити зкомпільований вивід” ** Використовується для перевірки того, що було створено компілятором. Завжди «перевіряйте» в професійних дискусіях — точніше, ніж «дивіться» або «перевіряйте»

• Приклад: “Перевірити компіляційний вивід у React DevTools playground, щоб перевірити, чи компілятор запам’ятовує дорогі обчислення.” *

“поступова адаптація” Описує поступове розгортання компілятора у базі коду, замість того, щоб увімкнути його повсюди одночасно. Команди «приймають підхід поступового прийняття» або «приймають компілятор поступово» Приклад: “Ми взяли підхід поступового прийняття — вмикання компілятора файл за файлом в монорепо протягом трьох спринтів.”

“вихід компілятора” Коли компілятор не може безпечно оптимізувати компонент через порушення правил, він «виходить» — залишає цей компонент незмінним. Розробники «бачать вихід з ладу», «запускають вихід з ладу», або «досліджують, чому компілятор вийшов з ладу» Приклад: “Відновлення компілятора на компоненті таблиці даних означає, що він все ще буде покладатися на ручне useMemo доки ми не переробимо мутацію.”

Практичні рекомендації

1. Після вмикання компілятора React, наші пакетні пере-рендери значно впали без будь-яких змін в вручну
2. «Компонент порушує правила компілятора, тому що він мутує масив елементів на місці — нам потрібно повернути новий масив замість цього»
3. Додати 'use no memo' до будь-якого компонента, який використовує пряме маніпулювання DOM поза моделлю React
4. «Перевірте компіляційний вивід, щоб переконатися, що компілятор правильно визначає, які властивості можуть змінюватися між рендерами»
5. «Ми плануємо поступове прийняття — починаючи з бездержавних компонентів, де порушення є найменш ймовірними»

Необхідно уникати помилок

** Сказати “компілятор запам’ ятовує компонент” ** Компілятор запам’ ятовує значення і функції всередині компонента, а не самого компонента. Правильна фраза: «компілятор запам’ ятовує дорогі обчислення» або «компілятор застосовує запам’ ятовування до значення повернення гачка»

Плутати “вступити” і “відступити” Якщо додаток Babel налаштовано глобально, типово буде позначено пункт « Включити компоненти ». Сказати, що компонент « включено », якщо ви маєте на увазі, що увімкнено весь проект, неправильно. Вкажіть обсяг: « включено весь проект » проти « виключено цей конкретний файл »

** Виклик директив « коментарі » ** "use memo" і "use no memo" є літеральними директивами рядка, а не коментарями. Називати їх «коментарями» неправильно — вони є оцінені рядки JavaScript, схожі на "use strict" або "use client" в React Server Components.

Summary

Компілятор React вводить фокусований словник — автоматичне запам’ ятовування, директиви компілятора, правила React, виключення з ладу і поступове прийняття — з якими ви часто стикаєтеся в обговореннях команди React, обговореннях RFC на GitHub, і конференційних розмовах від команди ядра React. Найкращим ресурсом для природної англійської мови є React Compiler RFC на GitHub і Meta Engineering блог пости про React Forget, де інженери, які побудували компілятор пояснюють свої рішення ясною, професійною англійською.

Навигація компілятора React: практичний підхід до технічної англійської

Компілятор React — кращий приклад сучасного розробника React — часто породжує складні дискусії щодо оптимізації, продуктивності і навіть відчуття вашого коду. Хоча технічна майстерність є найважливішою, здатність чітко сформулювати ці поняття англійською мовою, особливо під час співпраці з іншими розробниками або презентації роботи, може значно підвищити вашу ефективність. Це не про заміну точних технічних термінів, але про розуміння того, як ці терміни використовуються в професійному контексті - ефективно обговорюючи дискусії і точно повідомляючи про наміри. Ключовим елементом є визнання того, що розробка React не просто про написання коду; це про описання логіки, яка стоїть за цим кодом, особливо коли справа доходить до розширених оптимізацій, таких як мемоізація.

Однією з областей, де багато розробників борються, є переклад технічного жаргону в зрозумілі пояснення. Наприклад, старший розробник може сказати вам: « Нам слід агресивно оптимізувати швидкодію відтворення цього компонента за допомогою директив компілятора; це стає проблемою ». Хоча це технічно правильний висновок, але для когось, хто не знайомий з основними принципами, цей висновок не має контексту. Більш доступною формулюванням буде: «Цей компонент часто відображається і, можливо, впливає на загальну продуктивність. Давайте дослідимо, як ми можемо використати методи мемоізації — використовуючи директиви компілятора, щоб допомогти React тільки пере-рендери, коли це необхідно — щоб поліпшити його ефективність. » Ключова відмінність тут не зміна в * технічному * значенні, а в ясності комунікації, зосереджуючись на проблемі і її вирішенні, а не просто кидаючи навколо технічних термінів. Аналогічно, під час документування змін у PR, не вказуйте просто « Застосовано запам’ ятовування ». Замість цього поясніть * чому * ви застосували це: « Застосовано запам’ ятовування, щоб уникнути непотрібного повторного відтворення цього компонента, поліпшити швидкодію за допомогою кешування його виводу. »

Ефективне спілкування також поширюється на розуміння директив компілятора і отриманого компіляційного виводу. Це не просто рядки коду; це інструкції, які керують поведінкою React під час компіляції. Під час перегляду PR з значними змінами у цій області, ви можете побачити коментарі на зразок: « Створений вивід виглядає надто агресивно — чи ми впевнені, що всі гілки записано у пам’ ять? » Ця фраза підкреслює занепокоєння щодо потенційної неефективності і запрошує вас обговорити конкретні директиви і їх вплив на цикл відтворення компонента. Важливо розуміти, що компілятор React не просто пасивний перекладач коду; він активно оптимізує на основі цих директив, і розуміння того, як ці оптимізації застосовуються, є ключовим для ефективного зневадження і налаштування продуктивності.

Ось приклад того, як можна використовувати команду babel у цьому контексті:

babel src/components/ExpensiveComponent.js --plugins react-memo,'@babel/preset-react' --output-file dist/components/ExpensiveComponent.js

Ця команда демонструє використання Babel і певних додатків для створення оптимізованого JavaScript- коду для ExpensiveComponent, який включає методику запам’ ятовування, керовану директивами компілятора. Визначення цього рівня деталізації — інструменти, що беруть участь, параметри налаштування і очікуваний результат — дозволяє вам більш ефективно брати участь у дискусіях щодо продуктивності React.