Реализация хука useState

Хуки в React

В React хук — это функция, которая позволяет вам использовать состояние и другие функции React в функциональных компонентах. Хуки были представлены в React 16.8 как способ написания повторно используемой логики с отслеживанием состояния в функциональных компонентах. В React у нас есть несколько встроенных хуков, таких как useState, useEffect, useContext и т. д.

Простая реализация хука useState в React:

Примечание. Это будет работать только для одного состояния, для большего количества нам нужен массив.

const React = (function () {
  let _val;
  function useState(initVal) {
    const state = _val || initVal;
    console.log("useState called");
    const setState = (newVal) => (_val = newVal); //setter function
    return [state, setState];
  }

  function render(Component) {
    const C = Component();
    C.render();
    return C;
  }
  return { useState, render };
})();

function Component() {
  const [index, setIndex] = React.useState(0);
  return {
    render: () => console.log("index: ", index),
    setIndex: () => setIndex(index + 1),
  };
}

let App = React.render(Component);
App.setIndex();
App = React.render(Component);
App.setIndex();
App = React.render(Component);
App.setIndex();
App = React.render(Component);
App.render();

Выход

Объяснение

const React = (function () { ... })();: объявляет константу с именем React и присваивает ей результат немедленно вызванного функционального выражения (IIFE). Целью этого IIFE является создание замыкания и инкапсуляция функций useState и render.
Внутри IIFE у нас есть следующий код:

let _val;: Эта строка объявляет переменную _val в области действия функции. Он будет использоваться как частная переменная, совместно используемая компонентами.
function useState(initVal) { ... }: это реализация функции useState. Он инициализирует переменную state текущим _val или initVal, переданным в качестве аргумента. Он также определяет функцию setState, которая устанавливает _val в новое предоставленное значение. Наконец, он возвращает массив, содержащий функции state и setState.
function render(Component) { ... }: это реализация функции render. Он принимает функцию Component в качестве аргумента. Он вызывает функцию Component, которая, как ожидается, вернет объект с помощью метода render. Он вызывает C.render() для выполнения метода render объекта Component и возвращает объект Component.
Наконец, IIFE возвращает объект, содержащий функции useState и render.

3. function Component() { ... }: это пример функции компонента, который предназначен для рендеринга с помощью функции render. Он определяет вызов useState, который извлекает функции state и setState из объекта React. Функция Component возвращает объект с методом render и методом setIndex. Метод render записывает текущее значение index в консоль, а метод setIndex увеличивает index на 1.

4. let App = React.render(Component);: Эта строка вызывает функцию React.render с функцией Component в качестве аргумента. Он присваивает возвращаемое значение переменной App. Объект App должен иметь метод render.

5. App.setIndex();: эта строка вызывает метод setIndex для объекта App, увеличивая значение index на 1.

6. App = React.render(Component);: эта строка повторно отображает Component с помощью функции React.render и присваивает новый результат переменной App.

7. Шаги 5 и 6 повторяются несколько раз, чтобы продемонстрировать, как сохраняется и обновляется состояние при нескольких рендерингах.

_val образует замыкание. Замыкание — это комбинация функции и лексического окружения, в котором эта функция была объявлена. В этом случае функция useState имеет доступ к переменной _val, поскольку она объявлена во внешней области действия функции.

Каждый раз, когда вызывается функция useState, она ссылается на одну и ту же переменную _val, объявленную во внешней области видимости. Это позволяет сохранять состояние между несколькими вызовами функции useState и между различными рендерингами Component.

Надеюсь, вы нашли это полезным.

Обязательно посмотрите видео: https://www.youtube.com/watch?v=KJP1E-Y-xyo

Реализация хука useState — Управление состоянием в JavaScript

Хуки в React