Создаем свой React с рендером и useState за 30 минут

Понимание работы процессов приходит с изучением механизмов, которые приводят в движение мелкие части большого пазла. Если представить, что Вам дали задачу объяснить, что такое React за полчаса, скорее всего, Вы бы выбрали один из двух вариантов:

• пересказать все то, что изложено на первой странице официальной документации reactjs.org

• либо прокомментировать каждый из импортов в репозитории react

Разумеется, можно попробовать скомбинировать оба шага, но есть ли варианты интереснее?

Подготовка

Давайте создадим пустой проект, в который установим две dev зависимости:

yarn add -D parcel typescript

В нашем проекте parcel будет использоваться в качестве бандлера, который не требует настройки (как раз то, что нам нужно), а typescript (точнее typescript compiler - tsc) понадобится для легкого компилирования jsx в js. Для решения второй задачи можно было бы использовать babel, но используя typescript мы дополнительно получим статическую типизацию. Выполним следующую команду:

yarn tsc --init

// node_modules/typescript/package.json
"bin": {
  "tsc": "./bin/tsc",
  "tsserver": "./bin/tsserver"
}

Это поможет нам сгенерировать файл конфигурации для typescript - tsconfig.json. Далее нам необходимо сделать несколько косметических изменений:

1. Раскомментируем строку "jsx": "preserve" - и заменим "preserve" на значение "react". Таким образом мы указываем, какой тип output в случае появления jsx мы получим (подробнее поговорим о jsx в следующем разделе). Все варианты можно рассмотреть по ссылке.

2. Изменим значение флага "strict" с "true" на "false". Сделаем это, чтобы не отвлекаться на предупреждения во время работы над нашей версией React. 

   В итоге, изменения в tsconfig.json будут выглядеть следующим образом:

// tsconfig.json
-    // "jsx": "preserve"  /* Specify what JSX code is generated. */,
+    "jsx": "react"        /* Specify what JSX code is generated. */,
-    "strict": true        /* Enable all strict type-checking options. */,
+    "strict": false       /* Enable all strict type-checking options. */,

Все готово для начала работы! Чтобы убедиться, что мы готовы писать код, предлагаю начать с создания index.html со следующим содержимым:

// index.html
<script src="index.tsx" type="module"></script>

Соответсвенно, следующим шагом будет создание index.tsx, в котором мы выведем сообщение в консоль console.log("hello react");

// index.tsx
console.log("hello react");

Для того, чтобы запустить веб-сервер, добавим следующий блок в файл package.json в корне нашего проекта:

// package.json
"licence": "MIT",
"scripts": {
  "start": "parcel index.html"
},

Таким образом, после запуска yarn start в терминале, мы запустим приложение на 1234 порту локалхоста http://localhost:1234, при этом страница будет совершенно пустой, но в консоли будет выведено приветствие из файла index.tsx

JSX & React Elements

Рассмотрим объявление переменной в следующем блоке кода:

const element = <h1>React, what are you?</h1>;

Официальная документация React (в переводе которой на русский язык принял участие в том числе Ваш покорный слуга), начинает объяснение JSX с фразы:  

Этот странный тег — ни строка, ни фрагмент HTML

🤔 Интересное начало!

На мой взгляд, самым наглядным объяснением будет пример из песочницы typescript или babel (для babel не забудьте отжать галочку react слева!), где наше выражение <h1>React, what are you?</h1> превращается в следующую запись.

"use strict";

React.createElement("h1", null, "React, what are you?");

<div>
  <p>1</p>
  <p>2</p>
</div>

 React.createElement("div", null,
    React.createElement("p", null, "1"),
    React.createElement("p", null, "2"));

Получается, что после транспайлинга <h1>React, what are you?</h1> вместо верстки в переменную element запишется результат вызова React.createElement с тремя параметрами.

Убедимся в этом сами, в файле index.tsx добавим следующее содержимое:

// index.tsx
const element = <h1>React, what are you?</h1>;
console.log(element);

Сохраним изменения и проверим сообщение в консоли на странице http://localhost:1234

Uncaught ReferenceError: React is not defined

Ошибка вызвана тем, что TypeScript compiler выполнил свою работу как надо и в результате в переменную element должен попасть результат работы React.createElement, но проблема в том, что мы нигде не определили переменную React.

А что в обычной жизни?

В обычной жизни (до появления 17-ой версии react) можно было бы просто установить npm пакет react и добавить в начало файла index.tsx следующий импорт:

// index.tsx 
import React from "react" 

Действительно, это решит проблему (убедитесь, что у Вас добавлен атрибут type="module" тегу script в index.html) и в результате мы увидим следующий вывод в консоль:

Целью же этой статьи является разбор базовых концепции реакта, поэтому мы пойдем другим путем и напишем свою реализацию React.

В качестве быстрого решения, создадим переменную React и присвоим ей пустой объект:

// index.tsx
+ const React = {};

  const element = <h1>React, what are you?</h1>;
  console.log(element);

Теперь ошибка в консоли примет другой вид:

Uncaught TypeError: React.createElement is not a function

Что выглядит вполне логично, поэтому создадим метод createElement и выведем в консоль передаваемые параметры:

// index.tsx
const React = {
  createElement: (...params) => {
    console.log(params);
  },
};

// ...

Ошибка повержена, и мы наблюдаем массив из трех параметров, в точности как те, что мы видели в песочнице TypeScript!
Чтобы лучше разобраться, как работает React.createElement - усложним разметку. В итоге файл index.tsx примет следующий вид:

// index.tsx
const React = {
  createElement: (...params) => {
    console.log(params);
  },
};

const element = (
  <div>
    <header>Header</header>
    <main>
      <h1>Page title</h1>
      <p>lorem...</p>
    </main>
    <footer>Footer</footer>
  </div>
);

console.log(element);

Если посмотреть, что выведет консоль - получим интересную картину:

['header', {…}, 'Header']

['h1', {…}, 'Page title']

['p', {…}, 'lorem...']

['main', {…}, undefined, undefined]

['footer', {…}, 'Footer']

['div', {…}, undefined, undefined, undefined]

У неискушенного читателя может возникнуть несколько вопросов:

• Чем обусловлен именно такой порядок вызовов?

• Откуда взялись параметры undefined при вызовах для тегов main и div?

1. Вызовы createElement рекурсивны. Если взять родительский тег div, то в процессе вызова сначала выполнится вложенный вызов React.createElement("header", null, "Header") и другие вложенные вызовы, а только потом закончит работу первоначальный вызов React.createElement("div", …);

2. Настоящий вызов React.createElement (из npm пакета react) возвращает объект React элемента, а наша же функция пока только выводит параметры в консоль и ничего не возвращает (undefined). Исправим это! 🧑🏻‍💻

Модифицируем нашу функцию createElement, чтобы она возвращала элемент следующего вида:

// index.tsx
const React = {
  createElement: (tag, props, ...children) => {
    return {
      tag,
      props: {
        ...props,
        children,
      },
    };
  },
};

// ...

В реакте содержимое элемента автоматически доступно как проп children. Вложенных элементов может быть много, а может и не быть совсем, поэтому собираем все вложенные элементы в массив с помощью rest оператора.  

После проделанных манипуляций в консоли можно увидеть древовидную структуру, которая полностью соответствует нашей разметке!
Но как же вывести результат на экран? 🤔

Перед тем как сделать это, заменим в файле index.tsx элемент на компонент.

Подробно разница между элементом и компонентом разобрана в официальном блоге на reactjs.org.

С практической точки зрения, вместо переменной element мы создадим функцию App, которая будет возвращать элемент:

const App = () => (
  <div>
    <header>Header</header>
    <main>
      <h1>Page title</h1>
      <p>lorem...</p>
    </main>
    <footer>Footer</footer>
  </div>
);

Чтобы научить нашу версию метода React.createElement работать с компонентами, добавим следующую проверку:

// index.tsx

const React = {
  createElement: (tag, props, ...children) => {
+   if (typeof tag === "function") {
+      return tag({ ...props, children });
+    }

    return {
      tag,
      props: {
        ...props,
        children,
      },
    };
  },
};

+ const App = () => (
- const element = (
   <div>
     <header>Header</header>
     <main>
       <h1>Page title</h1>
       <p>lorem...</p>
     </main>
     <footer>Footer</footer>
   </div>
 );

+ console.log(<App />);
- console.log(element);

Если tag является функцией, createElement вернет результат ее вызова, передав props, в состав которых будет входить и children.

Эта особенность работы React.createElement частично объясняет ограничение JSX expressions must have one parent element.

ReactDOM render

Но для того, чтобы приложение появилось на экране браузера, необходимо в файле index.tsx добавить следующую строку кода.

ReactDOM.render(<App />, document.getElementById("root"));

Сразу мы получим ожидаемую ошибку Uncaught ReferenceError: ReactDOM is not defined, чтобы обойти которую добавим заглушку вида:

const ReactDOM = {
  render: (...params) => {
    console.log(params);
  },
};

В консоли пропала ошибка и мы видим массив из двух элементов. Первый - уже знакомое нам древовидное представление разметки, а второй null. Значение null появилось ожидаемо, ведь document.getElementById("root") не смог найти элемент с атрибутом id равным root. Чтобы такой элемент появился, добавим в index.html следующую строку:

// index.html
+ <div id="root"></div>
  <script src="index.tsx" type="module"></script>

В качестве id элемента можно было выбрать любое значение, но root очень хорошо подчеркивает назначение только что добавленного тега. Это будет корневой контейнер, в который мы добавим наше дерево (jsx элемент - результат вызова App).

Далее напишем реализацию ReactDOM.render:

const ReactDOM = {
  render: (element, container) => {
    if (typeof element === "string" || typeof element === "number") {
      container.appendChild(document.createTextNode(String(element)));

      return;
    }

    const { props, tag } = element;
    const domElement = document.createElement(tag);

    if (props.children) {
      for (const child of props.children) {
        ReactDOM.render(child, domElement);
      }
    }

    for (const prop in props) {
      const value = props[prop];
      if (prop !== "children") {
        domElement[prop] = value;
      }
    }

    container.appendChild(domElement);
  },
};

Разберем каждый блок кода в ReactDOM.render отдельно:

1. В случае, когда элемент, пришедший к нам является примитивом (строкой или числом) - мы создаем текстовую ноду и добавляем ее к контейнеру.

if (typeof element === "string" || typeof element === "number") {
  container.appendChild(document.createTextNode(String(element)));

  return;
}

 2. Если элемент не является примитивом, то мы ожидаем объект, у которого есть поля tag и props. На основании поля tag создадим DOM элемент. 

const { props, tag } = element;
const domElement = document.createElement(tag);

if (props.children) {
  for (const child of props.children) {
    ReactDOM.render(child, domElement);
  }
}

В указанном выше блоке, мы проверяем наличие пропы children. Если она есть - то для каждого чайлда рекурсивно вызываем ReactDOM.render, где в качестве контейнера передается созданный DOM элемент.

Таким образом, мы рендерим всех наследников в родителя (который в свою очередь может быть наследником для другого элемента).

Далее, для всех остальных пропов (кроме children) добавим соответствующие атрибуты DOM элементу.

for (const prop in props) {
  const value = props[prop];
  if (prop !== "children") {
    domElement[prop.toLowerCase()] = value;
  }
}

container.appendChild(domElement);

И в самом конце добавим полученный DOM элемент в контейнер.

В итоге на экране появится ожидаемый результат - наша разметка!

Конечно, можно было бы просто создать .html файлик и не мучаться, но такой разбор помог нам лучше понять как работает React.createElement и ReactDOM.render.
Следущий на очереди хук useState, но сначала произведем небольшой рефакторинг.

Добавляем типизацию + разносим код по отдельным файлам

Следующий раздел можно пропустить, если Вы хотите сосредоточиться именно на том, что касается React.

Цель этого блока сделать код более читаемым и структурированным.

Опишем типы и интерфейсы, которые мы используем. Для этого создадим отдельный файл types.ts:

// types.ts
export type Component<T = {}> = (props: IPropsWithChildren<T>) => JSX;
export type ReactTag = HTMLTag | Component;
type HTMLTag = keyof HTMLElementTagNameMap;
export type JSX = IElement | string | number;

interface IElement {
  tag: HTMLTag;
  props: IPropsWithChildren;
}

export type IPropsWithChildren<P = {}> = P & { children?: JSX[] };

Следующим шагом вынесем самописную версию ReactDOM в отдельный файл:

// react-dom.ts
import { JSX } from "./types";

const ReactDOM = {
  render: (element: JSX, container: HTMLElement): void => {
    if (typeof element === "string" || typeof element === "number") {
      container.appendChild(document.createTextNode(String(element)));

      return;
    }

    const { props, tag } = element;
    const domElement = document.createElement(tag);

    if (props.children) {
      for (const child of props.children) {
        ReactDOM.render(child, domElement);
      }
    }

    for (const prop in props) {
      const value = props[prop];
      if (prop !== "children") {
        domElement[prop.toLowerCase()] = value;
      }
    }

    container.appendChild(domElement);
  }
};

export default ReactDOM;

Аналогично создадим отдельный файл для React:

// react.ts
import { ReactTag, JSX, IPropsWithChildren } from "./types";

const React = {
  createElement: (
    tag: ReactTag,
    props: IPropsWithChildren,
    ...children: JSX[]
  ): JSX => {
    if (typeof tag === "function") {
      return tag({ ...props, children });
    }

    return {
      tag,
      props: {
        ...props,
        children,
      },
    };
  }
};

export default React;

Отдельный файл для компонента App:

// App.tsx
import React from "./react";
import { Component } from "./types";

const App: Component = () => (
  <div>
    <header>Header</header>
    <main>
      <h1>Page title</h1>
      <p>lorem...</p>
    </main>
    <footer>Footer</footer>
  </div>
);

export default App;

В итоге index.tsx превратится в удобно читаемый файл:

// index.tsx
import React from "./react";
import ReactDOM from "./react-dom";
import App from "./App";

const rootContainer = document.getElementById("root");
ReactDOM.render(<App />, rootContainer);

ReactDOM rerender

Ключевой особенностью this.setState в классовых компонентах и второго параметра из массива от useState в функциональных компонентах является возможность обновлять UI при изменении состояния. Такой результат достигается благодаря возможности вызывать ререндер. Давайте реализуем такую возможность как метод ReactDOM:

// react-dom.tsx
import { JSX } from "./types";
+ import React from "./react";
+ import App from "./App";

// ...

+ rerender: () => {
+   const rootContainer = document.getElementById("root");
+   rootContainer.removeChild(rootContainer.firstChild);
+   ReactDOM.render(<App />, rootContainer);
+ }

Сначала мы удаляем всё, что находится в root контейнере. Затем рендерим <App /> в контейнер.

☢️ Обратите внимание, что мы также изменяем расширение файла react-dom.ts на react-dom.tsx, поскольку при вызове ReactDOM.render первым параметром будет JSX element. Вдобавок к этому, мы добавляем import React from "./react".

На следующем шаге перейдем к стейту.

Самодельный useState

Для того, чтобы показать работу useState - создадим отдельный компонент счетчика (Counter), который предсказуемо будет выводить значение на экран. Также у нас будет две кнопки для инкремента и декремента.

Как выглядит использование хука useState в React? Рассмотрим на примере нового компонента Counter:

// Counter.tsx
import React from "./react";
import { Component } from "./types";

interface ICounterProps {
  initialValue: number;
}

export const Counter: Component<ICounterProps> = ({ initialValue }) => {
  const [value, setValue] = React.useState(initialValue);

  return (
    <div>
      <h2>Counter: {value}</h2>
      <div>
        <button onClick={() => setValue(value - 1)}>-</button>
        <button onClick={() => setValue(value + 1)}>+</button>
      </div>
    </div>
  );
};

Мы уже с Вами знаем, что в нашей версии React нет реализации useState, поэтому напишем свою версию.

Перед началом рассмотрения реализации хука, вспомним про важную особенность стейта. Она состоит в том, что useState сохраняет значения между рендерами. Чтобы добиться такого поведения - создадим объект globalState, в котором будем хранить массив всех стейтов + курсор. Изначально массив пуст, а курсор равен нулю:

// types.ts
export interface IGlobalState {
  states: any[];
  cursor: number;
}

// react.ts 
import { IGlobalState, ReactTag, JSX, IPropsWithChildren } from "./types";

const globalState: IGlobalState = {
  states: [],
  cursor: 0,
};

Когда мы перейдем к реализации useState, станет понятно зачем нам нужен курсор.

С формальной точки зрения, useState - это функция, которая принимает единственный параметр: начальное значение. Возвращает же массив и функцию для обновления стейта.

На первом рендере useState возвращает начальное значение, но затем нам нужно проверять, есть ли уже значение для данного хука в globalState. Именно курсор поможет нам получить доступ к нужному элементу массива, где хранится значение текущего стейта. Реализация будет выглядеть следующим образом:

// react.ts
import ReactDOM from "./react-dom";

// ...

useState<T>(initialValue: T): [state: T, setState: (newState: T) => void] {
  const currentCursor = globalState.cursor;
  const state = globalState.states[currentCursor] || initialValue;
  const setState = (newValue: T) => {
    globalState.states[currentCursor] = newValue;

    ReactDOM.rerender(globalState);
  };

  globalState.cursor += 1;

  return [state, setState];
},

Наша задача - создать массив, состоящий из state и setState. На первой итерации массив globalState.states пуст, поэтому в качестве state вернется initialValue.

Также мы фиксируем globalState.cursor в локальной переменной currentCursor, т.к. затем глобальный курсор будет увеличен на единицу.

Может возникнуть вопрос, а как будет происходить сброс курсора?

Для этого нам необходимо добавить последний штрих. Вызывая метод ReactDOM.rerender из setState, мы передадим globalState в качестве параметра, чтобы затем установить глобальный курсор на ноль перед следующим рендером.

// react-dom.tsx
- import { JSX } from "./types";
+ import { IGlobalState, JSX } from "./types";

// ...

- rerender: () => {
+ rerender: (globalState: IGlobalState) => {
    const rootContainer = document.getElementById("root");
    rootContainer.removeChild(rootContainer.firstChild);
+   globalState.cursor = 0;
    ReactDOM.render(<App />, rootContainer);
  },

Вызовем компонент Counter в теле нашего главного компонента App с начальным значением 646:

// App.tsx
  import React from "./react";
  import { Component } from "./types";
+ import { Counter } from "./Counter";

  const App: Component = () => (
    <div>
      <header>Header</header>
      <main>
        <h1>Page title</h1>
        <p>lorem...</p>
+       <Counter initialValue={646} />
      </main>
      <footer>Footer</footer>
    </div>
  );

  export default App;

Таким образом на экране мы увидим интерактивный счетчик, который под капотом использует API очень похожий на react и react-dom.

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

Выводы

Целью данной статьи было показать альтернативный вариант знакомства с React. Буду благодарен обратной связи!

Исходники можно найти по ссылке.