Заметки про React

2022-06-06 14:30:41 Работа с 3D моделями в Three.js

Вводный гайд по работе с 3D моделями с использованием библиотеки react-three-fiber. Разбирается как подключать glTF модели и отображать их на канвасе. Для работы со светом есть компоненты (заполняет светом всю сцену) и (свет по определенным точкам, как лампа). Для ручного управления камерой мышью используется компонент .

https://betterprogramming.pub/working-with-3d-model-in-three-js-e228621141af

217 viewsIlmir Shaikhutdinov, 11:30

Открыть/Комментировать

2022-06-03 14:05:05 Создание мини-версии Next.js

Джонас Гальвес в своем блоге рассказал. как создать свою мини-версию фреймворка Next.js. В своем эксперименте автор сосредоточился на двух основных фичах:
- роутинг на основе файлов в папке /pages;
- возможность изоморфного получения данных, используя функцию getServerSideProps();

Для сборки проекта используется Vite. Для получения списка файлов и его экспортов используется метод import.meta.globEager('/pages/**/*.jsx’), который возвращает массив объектов страниц с экспортами. Роуты формируются автоматически с использованием react-router-dom.

https://hire.jonasgalvez.com.br/2022/may/18/building-a-mini-next-js/ Открыть/Комментировать

2022-06-02 11:30:24 HolyJS 2022 Spring пройдет уже через неделю. 8–10 июня, на 80% online, а 23 июня в Санкт-Петербурге будет offline-день. 

Вас ждут 24 доклада от разработчиков из VK, Яндекса, QIWI, Тинькофф и других компаний. Поговорим о фреймворках, перформансе, техническом долге, архитектуре, работе с Node.js, serverless-подходе, графике, TypeScript и wasm.

Среди докладов:
«Безопасность данных: построение архитектуры при интеграции алгоритмов шифрования в приложении для финансового учета»;
«Wasm GC»;
«TypeScript: компромиссы проектирования языка»;
«Поймать дзен, работая над дизайн-системой Яндекс.Дзена»;
«Serverless — это не страшно!»;
«Нейрофизиология сложности кода».

Подробности и готовая программа — на сайте конференции.
Покупая билет на конференцию из вкладки «для частных лиц» используйте промокод reactnotes2022JRGpc для скидки. Открыть/Комментировать

2022-06-01 12:10:01 Обновление React Router v6.4.0-pre

В новую минорную версию React Router v6.4 было добавлено много новых абстракций из Remix: action, loader.
Если для страницы будут нужны данные, то их можно вернуть в функции loader, а получить в самом компоненте через хук useLoaderData. Функция action используется для мутаций. Мутации выполняются через отправку формы, используя компонент Form, или через хук useSubmit.


export async function loader({ params }) {
const note = await getNote(params.noteId);
if (!note) throw new Response("", { status: 404 });
return note;
}

export async function action({ params }) {
await deleteNote(params.noteId);
return redirect("/new");
}

export default function Note() {
const note = useLoaderData();
return (

);
}

createRoot(document.getElementById("root")).render(

} loader={rootLoader}>
path="note/:noteId"
element={}
loader={noteLoader}
action={noteAction}
errorElement={

Note not found

}
/>


);


https://beta.reactrouter.com/en/remixing/getting-started/data Открыть/Комментировать

2022-05-30 13:45:01 Обзор библиотек управления состоянием

Библиотеки управления состоянием определяют, как приложение будет делиться своим состоянием. Оно может быть глобальным или локальным для определенного участка приложения.

Менеджеры состояний позволяют избавиться от проп-дриллинга, когда компоненты создают пропсы, чтобы передать их в дочерние компоненты.

Альберт Гао в своем блоге составил обзор популярных библиотек управления состоянием. Библиотеки разбиты на категории: по структуре сторов (глобальный, несколько или атомарный), способу чтения записей из стора (селектор или геттер) и способу обновления стора (React-подобный API, экшен объект или инкапсулированный метод стора).

https://www.albertgao.xyz/2022/02/19/react-state-management-libraries-2022/ Открыть/Комментировать

2022-05-27 12:05:01 Мигрируем с Jest на Vitest

Vitest – это фреймворк тестирования, использующий в качестве сборщика Vite.js. Vitest использует совместимый с Jest API и поддерживает из под коробки основные фичи для тестирования (моки, снапшоты, покрытие). Также фреймворк поддерживает многопоточность, используя библиотеку tinypool.

Vitest особенно актуален, если вы используете в качестве сборщика приложения Vite.js. В этом случае для запуска тестов и сборки приложения будет использоваться один и тот же конфиг приложения (vite.config.js).

Если вы используете Jest, то совсем не сложно перейти на Vitest, учитывая что их API похоже. Катал Мак Доннача описал шаги для миграции с Jest на Vitest:

https://cathalmacdonnacha.com/migrating-from-jest-to-vitest Открыть/Комментировать

2022-05-25 13:31:00 RFC шаблонов в Next.js

Next.js планирует изменить свою систему роутинга. Это поможет адаптировать фичи React 18 и другие новые фичи.

Добавятся новые конвенции именования. Папка ./pages останется, но появится папка ./app, в которой будут работать новые фичи, например, Server Components.

Появится поддержка вложенных роутов/шаблонов с использованием компонента layout.js. Также появится компонент page.js, который будет использоваться для отображения страницы роута.

Также при использовании Suspense будет улучшение в загрузки данных. Вместо последовательной загрузки роутов и данных будет происходит их параллельная загрузка.

https://nextjs.org/blog/layouts-rfc Открыть/Комментировать

2022-05-20 12:15:06 Почему нельзя вызывать хуки по условию

Например, компонент по определенному условию вернул null. Это невалидный код на React. Но почему так делать нельзя?

const ConditionalComponent = (props) => {
if (!props.visible) return null;

const [value, setValue] = useState();
}


В первую очередь стоит помнить, что babel компилирует код JSX в обычные функции createElement:

const MyComponent = () => {
return
}

// babel компилирует в
const MyComponent = () => {
return React.createElement("div", null, "Hello world");
};

React рендерит компоненты, вызывает createElement, создает Virtual DOM и выводит пользователю в браузер отрендеренные элементы. Рендер – это просто вызов функции функционального компонента. Функциональный компонент вызывается, возвращается вызов createElement, React сравнивает текущее и новое дерево VDOM и коммитит изменения в DOM.

Важно понимать, что функциональный компонент это функция, которую вызывает React. Это создает проблему: как сохранить данные в стейте при вызовах функции (рендере). Например, следующий код при каждом вызове будет писать в консоль “1”:

const Test = () => {
let a = 1;
console.log(a);
a++;
}

Test(); // 1
Test(); // 1
Test(); // 1


Для того чтобы сохранять состояние стейта между рендерами компонента, React сохраняет состояние во внешнем объекте по ID хука, примерно так:

const state = [];

// Уникальный ID хука, счетчик
let idx = 0;

function useState(init) {
state[idx] = state[idx] ?? { val: init };

return [
state[idx].val,
data => state[idx].val = data
]
}

function Test() {
const [name, setName] = useState('React');
}

Вот почему мы не можем условно отображать хуки: они отслеживаются на основе порядка вызовов, используя в качестве ID счетчик.

Более подробно про хуки написано в блоке Дэна Абрамова: https://overreacted.io/why-do-hooks-rely-on-call-order/ Открыть/Комментировать

2022-05-18 12:30:25 useTilg – хук для отладки компонентов

Tiny Logger – небольшой хук для отладки компонентов. Выводит информацию, когда компонент был отрендерен (с какими пропсами), смонтирован и размонтирован. Также хук позволяет отследить как изменились стейты при рендере.

import { useState } from 'react'
import useTilg from 'tilg'

function MyApp() {
const [input, setInput] = useState('')
const [count, setCount] = useState(0)

useTilg()`input = ${input}, count = ${count}`

return (
<>
setInput(e.target.value)} value={input} />
setCount(count + 1)}>{count}

)
}


https://github.com/shuding/tilg Открыть/Комментировать

2022-05-16 13:30:09 Как работает поверхностное сравнение в React

Поверхностное сравнение используется в React в качестве механизма для определения необходимости обновления компонента, массива зависимостей хука, изменения пропсов мемоизированного компонента. Давайте рассмотрим функцию поверхностного сравнения и разберемся как она работает.

import is from './objectIs';
import hasOwnProperty from './hasOwnProperty';

function shallowEqual(objA: mixed, objB: mixed): boolean {
/**
* Проверка равенства примитивных значений.
*/
if (is(objA, objB)) {
return true;
}

/**
* Проверка на то, что текущие аргументы являются объектами и не равны null.
*/
if (
typeof objA !== 'object' ||
objA === null ||
typeof objB !== 'object' ||
objB === null
) {
return false;
}

/**
* На этом шаге мы уверены что работаем с объектами, получаем ключи объекта.
*/
const keysA = Object.keys(objA);
const keysB = Object.keys(objB);

/**
* Сравниваем количество ключей объектов.
*/
if (keysA.length !== keysB.length) {
return false;
}

/**
* Сравнение значения объекта для каждого ключа объекта A с объектом B.
* Проверяется наличие ключа объекта A в объекте B.
*/
for (let i = 0; i < keysA.length; i++) {
const currentKey = keysA[i];
if (
!hasOwnProperty.call(objB, currentKey) ||
!is(objA[currentKey], objB[currentKey])
) {
return false;
}
}

return true;
}


Выводы:
- Для сравнения объектов используется Object.is вместо строгого равенства.
- В поверхностном сравнение пустой массив и пустой объект равны.
- Объект с индексами в ключах и массив с такими же значениями одинаковы, т.е. { 0: 2, 1: 3 } равен [2, 3].
- Из-за использования Object.is вместо ===, +0 и -0 не равны, а Number.NaN и NaN равны.

https://www.chakshunyu.com/blog/how-does-shallow-comparison-work-in-react/ Открыть/Комментировать