Фронтенд-разработчик React (Профессиональный уровень)

Экзаменационный билет №1

Теоретическая часть

1. Объясните, в чём заключается разница между useEffect и useLayoutEffectПриведите примеры ситуаций, когда следует использовать каждый из них.

2. Что такое reconciliation в React и как он влияет на производительность рендеринга? Опишите принцип работы алгоритма согласования.

Ответы на теоретическую часть:

1. useEffect запускается асинхронно после завершения рендера и отрисовки компонента в браузере — это стандартное поведение для большинства побочных эффектов (например, подписки, API-запросы).
   useLayoutEffect запускается синхронно сразу после рендера, но до того, как браузер перерисует экран — используется, если нужно прочитать макет или размеры DOM перед отображением (например, позиционирование попапа).
2. Reconciliation — это процесс сравнения нового Virtual DOM с предыдущим, чтобы определить минимальные изменения для обновления реального DOM. Это позволяет React работать эффективно, минимизируя дорогостоящие операции. Алгоритм использует стратегию сравнения по типу элементов и ключамkeyчто особенно важно при работе со списками.

Практическая часть

Реализуйте пользовательский хук useLocalStorageкоторый принимает ключ и начальное значение, и возвращает массив [value, setValue, clearValue]Значение должно сохраняться в localStorage и восстанавливаться при повторном монтировании. Также реализуйте функцию clearValueкоторая удаляет запись из localStorageи сбрасывает значение к начальному.

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue !== null ? JSON.parse(storedValue) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  const clearValue = () => {
    localStorage.removeItem(key);
    setValue(initialValue);
  };

  return [value, setValue, clearValue];
};

Экзаменационный билет №2

Теоретическая часть

1. Что такое «controlled components» и зачем они используются в React? Объясните, почему их предпочтительно использовать вместо uncontrolled компонентов.

2. Охарактеризуйте механизм работы React.memo() и useMemo()В чём разница между ними и в каких случаях следует использовать каждый из них?

Ответы на теоретическую часть:

1. Controlled components — это элементы формы например, <input><select>состояние которых управляется через state в React-компоненте. Это позволяет централизованно контролировать данные, обрабатывать изменения и валидацию, а также синхронизировать состояние формы с другими частями приложения. Такой подход обеспечивает однонаправленный поток данных и делает форму более предсказуемой и управляемой по сравнению с uncontrolled компонентами, которые полагаются на DOM для хранения состояния.
2. React.memo() — это Higher-Order Component, используемый для оптимизации рендеринга дочерних компонентов. Он предотвращает повторный рендер компонента, если его props не изменились. Применяется для компонентов, которые часто получают одни и те же props и дорогостоящие перерисовки.

Практическая часть

Реализуйте компонент AutoSuggestInputпринимающий список строкoptionsи функцию onSelectКомпонент должен отображать текстовое поле и выпадающий список совпадений по мере ввода. При выборе варианта из списка вызывается onSelectа введённое значение должно обновляться. Поиск должен быть регистронезависимым. Добавьте возможность фильтрации только тех вариантов, которые содержат введённую подстроку.

const AutoSuggestInput = ({ options, onSelect }) => {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  const filteredOptions = useMemo(() => {
    if (!query) return options;
    const lowerQuery = query.toLowerCase();
    return options.filter(option =>
      option.toLowerCase().includes(lowerQuery)
    );
  }, [options, query]);

  const handleSelect = (option) => {
    setQuery(option);
    setIsOpen(false);
    onSelect(option);
  };

  return (
    <div style={{ position: 'relative' }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => setIsOpen(true)}
        placeholder="Введите запрос"
      />
      {isOpen && filteredOptions.length > 0 && (
        <ul style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          maxHeight: '200px',
          overflowY: 'auto',
          border: '1px solid #ccc',
          backgroundColor: '#fff',
          zIndex: 1000,
          listStyle: 'none',
          margin: 0,
          padding: 0
        }}>
          {filteredOptions.map((option, index) => (
            <li
              key={index}
              onClick={() => handleSelect(option)}
              style={{ padding: '8px', cursor: 'pointer' }}
              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f0f0f0'}
              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

Экзаменационный билет №3

Теоретическая часть

1. Объясните, что такое Virtual DOM и как он помогает в повышении производительности React-приложений.

2. Что такое Higher-Order Component (HOC)? Приведите пример использования и укажите его основные преимущества и недостатки.

Ответы на теоретическую часть:

1. Virtual DOM — это легковесное представление реального DOM, используемое React для эффективного обновления интерфейса. При изменении состояния React создаёт новый Virtual DOM, сравнивает его со старым (reconciliation), вычисляет минимальные изменения и применяет их к реальному DOM. Это позволяет избежать частых и дорогостоящих операций обновления DOM напрямую, тем самым повышая производительность приложения.
2. Higher-Order Component (HOC) — это функция, которая принимает компонент и возвращает новый компонент с дополнительным поведением или props. Используется для повторного использования логики между компонентами (например, авторизация, загрузка данных).

Практическая часть

Реализуйте пользовательский хук useDebounceкоторый принимает значение и задержку, и возвращает это значение с задержкой обновления. Хук должен быть полезен при реализации поиска с debounce, чтобы не отправлять запросы слишком часто.

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

Экзаменационный билет №4

Теоретическая часть

1. Что такое «uncontrolled components» в React? В каких случаях их использование оправдано и какие инструменты предоставляет React для работы с ними?

2. Объясните, что такое Portals в React и приведите примеры использования.

Ответы на теоретическую часть:

1. Uncontrolled components — это элементы формы например, <input><textarea><select> состояние которых управляется напрямую DOM-элементом, а не React. Для доступа к их значению используется refТакие компоненты полезны при простых формах или интеграции с не-React библиотеками, где нет необходимости синхронизировать состояние в React.
2. Portals в React позволяют рендерить дочерние элементы вне иерархии родительского компонента в произвольном DOM-узле. Это особенно полезно для модальных окон, тултипов, уведомлений и других UI-компонентов, которые должны отображаться поверх основного контента без влияния на структуру CSS-позиционирования.

Практическая часть

Реализуйте функциональный компонент ModalWindowкоторый принимает children и onCloseМодальное окно должно появляться при нажатии на кнопку "Открыть", затем отображать содержимое и закрываться по клику на фон или кнопку "Закрыть". Используйте портал для вывода окна в корневой элемент #modal-root

const ModalWindow = ({ children, onClose }) => {
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, [onClose]);

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  const modalContent = (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="modal-content">
        <button className="close-button" onClick={onClose}>×</button>
        {children}
      </div>
    </div>
  );

  return ReactDOM.createPortal(modalContent, modalRoot);
};

// Пример использования:

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Открыть модальное окно</button>

      {isModalOpen && (
        <ModalWindow onClose={() => setIsModalOpen(false)}>
          <h2>Модальное окно</h2>
          <p>Это содержимое модального окна.</p>
        </ModalWindow>
      )}
    </div>
  );
}

Экзаменационный билет №5

Теоретическая часть

1. Что такое React Context API и в каких случаях она применяется? Какие основные компоненты предоставляет Context API?

2. Охарактеризуйте работу хука useReducerВ чём его преимущество перед useState и когда он наиболее уместен?

Ответы на теоретическую часть:

1. React Context API — это механизм передачи данных через дерево компонентов без необходимости явно передавать props на каждом уровне. Чаще всего используется для передачи глобального состояния, такого как тема приложения, данные авторизации, языковые настройки и т. д.
2. Хук useReducerиспользуется для управления сложным состоянием, особенно если оно содержит несколько подзначений или если следующее состояние зависит от предыдущего. Он похож на Redux: принимает редюсер (функцию, которая возвращает новое состояние на основе действия) и начальное состояние.

Практическая часть

Реализуйте простую форму входа с помощью useReducerгде состояние включает emailpasswordisLoadingerrorДобавьте валидацию email и возможность отправки формы. Форма должна иметь кнопку "Войти" и отображать ошибку, если ввод некорректный или запрос не удался.

const formReducer = (state, action) => {
  switch (action.type) {
    case 'change_email':
      return { ...state, email: action.payload, error: '' };
    case 'change_password':
      return { ...state, password: action.payload, error: '' };
    case 'submit_start':
      return { ...state, isLoading: true, error: '' };
    case 'submit_success':
      return { ...state, isLoading: false };
    case 'submit_error':
      return { ...state, isLoading: false, error: action.payload };
    case 'validate_email':
      return { ...state, error: 'Введите корректный email' };
    default:
      return state;
  }
};

const LoginForm = () => {
  const [state, dispatch] = useReducer(formReducer, {
    email: '',
    password: '',
    isLoading: false,
    error: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();

    const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email);
    if (!isValidEmail) {
      dispatch({ type: 'validate_email' });
      return;
    }

    dispatch({ type: 'submit_start' });

    // Мокаем асинхронный запрос
    setTimeout(() => {
      if (state.password.length < 6) {
        dispatch({ type: 'submit_error', payload: 'Неверный пароль' });
      } else {
        dispatch({ type: 'submit_success' });
        alert('Вход выполнен успешно');
      }
    }, 1000);
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '300px', margin: 'auto' }}>
      <h2>Вход</h2>
      {state.error && <div style={{ color: 'red' }}>{state.error}</div>}
      <div>
        <label>Email:</label>
        <input
          type="text"
          value={state.email}
          onChange={(e) => dispatch({ type: 'change_email', payload: e.target.value })}
        />
      </div>
      <div>
        <label>Пароль:</label>
        <input
          type="password"
          value={state.password}
          onChange={(e) => dispatch({ type: 'change_password', payload: e.target.value })}
        />
      </div>
      <button type="submit" disabled={state.isLoading}>
        {state.isLoading ? 'Загрузка...' : 'Войти'}
      </button>
    </form>
  );
};

Экзаменационный билет №6

Теоретическая часть

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

2. Что такое пользовательские хуки (custom hooks) и какие правила их создания и использования в React?

Ответы на теоретическую часть:

1. Reconciliation — это процесс сравнения нового Virtual DOM с предыдущим, чтобы определить минимальные изменения для обновления реального DOM. Это позволяет React работать максимально производительно, избегая полной перерисовки интерфейса.
2. Пользовательские хуки — это функции, начинающиеся с префикса useкоторые могут использовать встроенные хуки ReactuseStateuseEffectuseContextи др. для реализации повторно используемой логики между компонентами. Они не создают собственного контекста рендера, а просто абстрагируют состояние и побочные эффекты.

Практическая часть

Реализуйте пользовательский хук useFetchкоторый принимает URL и параметры запроса, и возвращает объект { data, loading, error }Хук должен выполнять fetch-запрос, обрабатывать ошибки и поддерживать отмену запроса при размонтировании компонента.

const useFetch = (url, options = {}) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    const abortController = new AbortController();

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          ...options,
          signal: abortController.signal
        });

        if (!response.ok) throw new Error(`Ошибка HTTP: ${response.status}`);

        const result = await response.json();

        if (isMounted) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted && err.name !== 'AbortError') {
          setError(err.message);
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
      abortController.abort();
    };
  }, [url, options]);

  return { data, loading, error };
};

Экзаменационный билет №7

Теоретическая часть

1. Объясните, что такое PureComponent и React.memo. В чём их отличие и когда следует использовать каждый из них?

2. Что такое порталы в React и зачем они нужны? Приведите примеры использования.

Ответы на теоретическую часть:

1. PureComponent — это базовый класс для классовых компонентов, реализующий метод shouldComponentUpdate() с поверхностным сравнением props и state. Он предотвращает ненужный рендер, если данные не изменились.

   React.memo — это Higher-Order Component, который применяется к функциональным компонентам и делает то же самое — сравнивает props и пропускает рендер, если они не изменились.

   Разница:

   • PureComponent работает с классовыми компонентами.
   • React.memo — с функциональными.
   • React.memo можно расширить, передав свою функцию сравнения вторым аргументом.
    

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

2. Portals в React позволяют рендерить дочерние элементы вне иерархии родительского компонента в произвольном DOM-узле. Это особенно полезно для модальных окон, уведомлений, тултипов и других UI-компонентов, которые должны быть позиционированы вне текущего контекста CSS.

Практическая часть

Создайте компонент TabPanelпринимающий массив вкладок tabsи отображающий содержимое активной вкладки. Каждая вкладка должна иметь заголовок и содержимое. При клике на вкладку должно меняться состояние активной вкладки. Добавьте возможность отключения вкладок и стилизовать активную вкладку.

const TabPanel = ({ tabs }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleTabClick = (index) => {
    if (!tabs[index].disabled) {
      setActiveIndex(index);
    }
  };

  return (
    <div className="tab-panel">
      <div className="tab-list" role="tablist">
        {tabs.map((tab, index) => (
          <button
            key={index}
            role="tab"
            aria-selected={index === activeIndex}
            disabled={tab.disabled}
            onClick={() => handleTabClick(index)}
            className={`tab-button ${index === activeIndex ? 'active' : ''}`}
          >
            {tab.title}
          </button>
        ))}
      </div>
      <div className="tab-content" role="tabpanel">
        {tabs[activeIndex].content}
      </div>
    </div>
  );
};

// Пример использования:
function App() {
  const tabs = [
    {
      title: 'Вкладка 1',
      content: <p>Содержимое первой вкладки.</p>,
      disabled: false
    },
    {
      title: 'Вкладка 2',
      content: <p>Содержимое второй вкладки.</p>,
      disabled: false
    },
    {
      title: 'Заблокировано',
      content: <p>Эта вкладка отключена.</p>,
      disabled: true
    }
  ];

  return <TabPanel tabs={tabs} />;
}

Экзаменационный билет №8

Теоретическая часть

1. Объясните, в чём заключается разница между useEffect и useLayoutEffectПриведите примеры ситуаций, когда следует использовать каждый из них.

2. Что такое «controlled components» и зачем они используются в React? Объясните, почему их предпочтительно использовать вместо uncontrolled компонентов.

Ответы на теоретическую часть:

1. useEffect запускается асинхронно после завершения рендера и отрисовки компонента в браузере — это стандартное поведение для большинства побочных эффектов (например, подписки, API-запросы).

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

   Используйте useLayoutEffectесли вам нужно выполнить изменения, которые влияют на визуальное представление элемента до его отрисовки.

2. Controlled components — это элементы формы например, <input><select>состояние которых управляется через stateв React-компоненте. Это позволяет централизованно контролировать данные, обрабатывать изменения и валидацию, а также синхронизировать состояние формы с другими частями приложения.

Практическая часть

Реализуйте пользовательский хук useDebounceкоторый принимает значение и задержку, и возвращает это значение с задержкой обновления. Хук должен быть полезен при реализации поиска с debounce, чтобы не отправлять запросы слишком часто.

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

Экзаменационный билет №9

Теоретическая часть

1. Что такое Virtual DOM и как он помогает в повышении производительности React-приложений?

2. Что такое Higher-Order Component (HOC)? Приведите пример использования и укажите его основные преимущества и недостатки.

Ответы на теоретическую часть:

1. Virtual DOM — это легковесное представление реального DOM, используемое React для эффективного обновления интерфейса. При изменении состояния React создаёт новый Virtual DOM, сравнивает его со старым (reconciliation), вычисляет минимальные изменения и применяет их к реальному DOM. Это позволяет избежать частых и дорогостоящих операций обновления DOM напрямую, тем самым повышая производительность приложения.
2. Higher-Order Component (HOC) — это функция, которая принимает компонент и возвращает новый компонент с дополнительным поведением или props. Используется для повторного использования логики между компонентами (например, авторизация, загрузка данных).

Практическая часть

Реализуйте компонент AutoSuggestInputпринимающий список строкoptionsи функцию onSelectКомпонент должен отображать текстовое поле и выпадающий список совпадений по мере ввода. При выборе варианта из списка вызывается onSelectа введённое значение должно обновляться. Поиск должен быть регистронезависимым. Добавьте возможность фильтрации только тех вариантов, которые содержат введённую подстроку.

const AutoSuggestInput = ({ options, onSelect }) => {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  const filteredOptions = useMemo(() => {
    if (!query) return options;
    const lowerQuery = query.toLowerCase();
    return options.filter(option =>
      option.toLowerCase().includes(lowerQuery)
    );
  }, [options, query]);

  const handleSelect = (option) => {
    setQuery(option);
    setIsOpen(false);
    onSelect(option);
  };

  return (
    <div style={{ position: 'relative' }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onFocus={() => setIsOpen(true)}
        placeholder="Введите запрос"
      />
      {isOpen && filteredOptions.length > 0 && (
        <ul style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          maxHeight: '200px',
          overflowY: 'auto',
          border: '1px solid #ccc',
          backgroundColor: '#fff',
          zIndex: 1000,
          listStyle: 'none',
          margin: 0,
          padding: 0
        }}>
          {filteredOptions.map((option, index) => (
            <li
              key={index}
              onClick={() => handleSelect(option)}
              style={{ padding: '8px', cursor: 'pointer' }}
              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f0f0f0'}
              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

Экзаменационный билет №10

Теоретическая часть

1. Что такое reconciliation и как он влияет на производительность рендеринга? Опишите принцип работы алгоритма согласования.

2. Что такое React Context API и в каких случаях она применяется? Какие основные компоненты предоставляет Context API?

Ответы на теоретическую часть:

1. Reconciliation — это процесс сравнения нового Virtual DOM с предыдущим, чтобы определить минимальные изменения для обновления реального DOM. Это позволяет React работать максимально производительно, избегая полной перерисовки интерфейса. Алгоритм использует два ключевых подхода:
   • Сравнение по типу элемента: если типы элементов разные — узел полностью заменяется.
   • Использование key для корректного сравнения элементов списка, что помогает React точно определить, какие элементы были изменены, добавлены или удалены.
2. React Context API — это механизм передачи данных через дерево компонентов без необходимости явно передавать props на каждом уровне. Чаще всего используется для передачи глобального состояния, такого как тема приложения, данные авторизации, языковые настройки и т. д.

Практическая часть

Реализуйте пользовательский хук useLocalStorageкоторый принимает ключ и начальное значение, и возвращает массив [value, setValue, clearValue]Значение должно сохраняться в localStorage и восстанавливаться при повторном монтировании. Также реализуйте функцию clearValueкоторая удаляет запись из localStorageи сбрасывает значение к начальному.

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue !== null ? JSON.parse(storedValue) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  const clearValue = () => {
    localStorage.removeItem(key);
    setValue(initialValue);
  };

  return [value, setValue, clearValue];
};

Экзаменационный билет №11

Теоретическая часть

1. Что такое «uncontrolled components» в React? В каких случаях их использование оправдано и какие инструменты предоставляет React для работы с ними?

2. Объясните, что такое Portals в React и приведите примеры использования.

Ответы на теоретическую часть:

1. Uncontrolled components — это элементы формы например, <input><textarea><select>состояние которых управляется напрямую DOM-элементом, а не React. Для доступа к их значению используется refТакие компоненты полезны при простых формах или интеграции с не-React библиотеками, где нет необходимости синхронизировать состояние в React.
2. Portals в React позволяют рендерить дочерние элементы вне иерархии родительского компонента в произвольном DOM-узле. Это особенно полезно для модальных окон, тултипов, уведомлений и других UI-компонентов, которые должны отображаться поверх основного контента без влияния на структуру CSS-позиционирования.

Практическая часть

Реализуйте функциональный компонент ModalWindowкоторый принимает children и onCloseМодальное окно должно появляться при нажатии на кнопку "Открыть", затем отображать содержимое и закрываться по клику на фон или кнопку "Закрыть". Используйте портал для вывода окна в корневой элемент #modal-root

const ModalWindow = ({ children, onClose }) => {
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, [onClose]);

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  const modalContent = (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="modal-content">
        <button className="close-button" onClick={onClose}>×</button>
        {children}
      </div>
    </div>
  );

  return ReactDOM.createPortal(modalContent, modalRoot);
};

// Пример использования:

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Открыть модальное окно</button>

      {isModalOpen && (
        <ModalWindow onClose={() => setIsModalOpen(false)}>
          <h2>Модальное окно</h2>
          <p>Это содержимое модального окна.</p>
        </ModalWindow>
      )}
    </div>
  );
}

Экзаменационный билет №12

Теоретическая часть

1. Охарактеризуйте работу хука useReducerВ чём его преимущество перед useState и когда он наиболее уместен?

2. Что такое reconciliation в React и как он влияет на производительность рендеринга? Опишите принцип работы алгоритма согласования.

Ответы на теоретическую часть:

1. Хук useReducer используется для управления сложным состоянием, особенно если оно содержит несколько подзначений или если следующее состояние зависит от предыдущего. Он похож на Redux: принимает редюсер (функцию, которая возвращает новое состояние на основе действия) и начальное состояние.
2. Reconciliation — это процесс сравнения нового Virtual DOM с предыдущим, чтобы определить минимальные изменения для обновления реального DOM. Это позволяет React работать максимально производительно, избегая полной перерисовки интерфейса. Алгоритм использует два ключевых подхода:
   • Сравнение по типу элемента: если типы элементов разные — узел полностью заменяется.
   • Использование key для корректного сравнения элементов списка, что помогает React точно определить, какие элементы были изменены, добавлены или удалены.

Практическая часть

Реализуйте простую форму входа с помощью useReducerгде состояние включает emailpasswordisLoadingerrorДобавьте валидацию email и возможность отправки формы. Форма должна иметь кнопку "Войти" и отображать ошибку, если ввод некорректный или запрос не удался.

const formReducer = (state, action) => {
  switch (action.type) {
    case 'change_email':
      return { ...state, email: action.payload, error: '' };
    case 'change_password':
      return { ...state, password: action.payload, error: '' };
    case 'submit_start':
      return { ...state, isLoading: true, error: '' };
    case 'submit_success':
      return { ...state, isLoading: false };
    case 'submit_error':
      return { ...state, isLoading: false, error: action.payload };
    case 'validate_email':
      return { ...state, error: 'Введите корректный email' };
    default:
      return state;
  }
};

const LoginForm = () => {
  const [state, dispatch] = useReducer(formReducer, {
    email: '',
    password: '',
    isLoading: false,
    error: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();

    const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email);
    if (!isValidEmail) {
      dispatch({ type: 'validate_email' });
      return;
    }

    dispatch({ type: 'submit_start' });

    // Мокаем асинхронный запрос
    setTimeout(() => {
      if (state.password.length < 6) {
        dispatch({ type: 'submit_error', payload: 'Неверный пароль' });
      } else {
        dispatch({ type: 'submit_success' });
        alert('Вход выполнен успешно');
      }
    }, 1000);
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '300px', margin: 'auto' }}>
      <h2>Вход</h2>
      {state.error && <div style={{ color: 'red' }}>{state.error}</div>}
      <div>
        <label>Email:</label>
        <input
          type="text"
          value={state.email}
          onChange={(e) => dispatch({ type: 'change_email', payload: e.target.value })}
        />
      </div>
      <div>
        <label>Пароль:</label>
        <input
          type="password"
          value={state.password}
          onChange={(e) => dispatch({ type: 'change_password', payload: e.target.value })}
        />
      </div>
      <button type="submit" disabled={state.isLoading}>
        {state.isLoading ? 'Загрузка...' : 'Войти'}
      </button>
    </form>
  );
};

Экзаменационный билет №13

Теоретическая часть

1. Объясните, что такое PureComponent и React.memo. В чём их отличие и когда следует использовать каждый из них?

2. Что такое порталы в React и зачем они нужны? Приведите примеры использования.

Ответы на теоретическую часть:

1. PureComponent — это базовый класс для классовых компонентов, реализующий метод shouldComponentUpdate() с поверхностным сравнением props и state. Он предотвращает ненужный рендер, если данные не изменились.

   React.memo — это Higher-Order Component, который применяется к функциональным компонентам и делает то же самое — сравнивает props и пропускает рендер, если они не изменились.

   Разница:

   • PureComponent работает с классовыми компонентами.
   • React.memo — с функциональными.
   • React.memo можно расширить, передав свою функцию сравнения вторым аргументом.
2. Portals в React позволяют рендерить дочерние элементы вне иерархии родительского компонента в произвольном DOM-узле. Это особенно полезно для модальных окон, уведомлений, тултипов и других UI-компонентов, которые должны быть позиционированы вне текущего контекста CSS.

Практическая часть

Создайте компонент TabPanelпринимающий массив вкладокtabs и отображающий содержимое активной вкладки. Каждая вкладка должна иметь заголовок и содержимое. При клике на вкладку должно меняться состояние активной вкладки. Добавьте возможность отключения вкладок и стилизовать активную вкладку.

const TabPanel = ({ tabs }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleTabClick = (index) => {
    if (!tabs[index].disabled) {
      setActiveIndex(index);
    }
  };

  return (
    <div className="tab-panel">
      <div className="tab-list" role="tablist">
        {tabs.map((tab, index) => (
          <button
            key={index}
            role="tab"
            aria-selected={index === activeIndex}
            disabled={tab.disabled}
            onClick={() => handleTabClick(index)}
            className={`tab-button ${index === activeIndex ? 'active' : ''}`}
          >
            {tab.title}
          </button>
        ))}
      </div>
      <div className="tab-content" role="tabpanel">
        {tabs[activeIndex].content}
      </div>
    </div>
  );
};

// Пример использования:
function App() {
  const tabs = [
    {
      title: 'Вкладка 1',
      content: <p>Содержимое первой вкладки.</p>,
      disabled: false
    },
    {
      title: 'Вкладка 2',
      content: <p>Содержимое второй вкладки.</p>,
      disabled: false
    },
    {
      title: 'Заблокировано',
      content: <p>Эта вкладка отключена.</p>,
      disabled: true
    }
  ];

  return <TabPanel tabs={tabs} />;
}

Экзаменационный билет №14

Теоретическая часть

1. Объясните, что такое React Context API и в каких сценариях её использование наиболее уместно. Какие ограничения имеет Context API?

2. Что такое ленивая загрузка (lazy loading) компонентов в React? Как реализуется через React.lazy() и Suspense

Ответы на теоретическую часть:

1. 1. React Context API — это механизм передачи данных через дерево компонентов без необходимости явно передавать props на каждом уровне. Чаще всего используется для передачи глобального состояния, такого как тема приложения, данные авторизации, языковые настройки и т. д.

   Context состоит из:

   • React.createContext() — создаёт объект контекста.
   • Provider — компонент, который позволяет дочерним компонентам потреблять значение контекста.
   • Consumer или хук useContext — используется для чтения значения контекста.
2. Ленивая загрузка (lazy loading) — это подход, при котором компоненты загружаются только при необходимости, например, при первом обращении к ним. Это улучшает производительность начальной загрузки приложения за счёт уменьшения объёма загружаемого JavaScript.

Практическая часть

Реализуйте пользовательский хук useFetchкоторый принимает URL и параметры запроса, и возвращает объект { data, loading, error }Хук должен выполнять fetch-запрос, обрабатывать ошибки и поддерживать отмену запроса при размонтировании компонента.

const useFetch = (url, options = {}) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    const abortController = new AbortController();

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          ...options,
          signal: abortController.signal
        });

        if (!response.ok) throw new Error(`Ошибка HTTP: ${response.status}`);

        const result = await response.json();

        if (isMounted) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted && err.name !== 'AbortError') {
          setError(err.message);
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
      abortController.abort();
    };
  }, [url, options]);

  return { data, loading, error };
};

Экзаменационный билет №15

Теоретическая часть

1. Что такое React.Fragment и зачем он используется? Приведите примеры использования и объясните, почему он предпочтительнее обёртки в виде <div>

2. Охарактеризуйте работу хука useRefВ чём его отличие от useState и когда следует использовать?

Ответы на теоретическую часть:

1. React.Fragment — это способ группировать несколько элементов JSX без добавления лишнего узла в DOM. Используется, когда нужно вернуть несколько элементов из компонента, но не хочется оборачивать их в дополнительный контейнер, например, <div>, который может нарушить структуру CSS или семантику HTML.
2. Хук useRef возвращает изменяемый объект, свойство .current которого сохраняет своё значение между рендерами. Он полезен для:
   • Хранения ссылок на DOM-элементы ref={myRef}
   • Хранения любого значения, которое не должно вызывать повторный рендер при его изменении в отличие от useState

Практическая часть

Реализуйте пользовательский хук useDebounceкоторый принимает значение и задержку, и возвращает это значение с задержкой обновления. Хук должен быть полезен при реализации поиска с debounce, чтобы не отправлять запросы слишком часто.

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};