Фронтенд Гайд

Назови компоненты жизненного цикл ? Спросят с вероятностью 7% Компонент жизненного цикла включает в себя несколько этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждая из этих фаз включает определенные методы цикла. 1️⃣ Монтирование (Mounting): ✅ constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов. ✅ static getDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами. ✅ render(): Обязательный метод, который возвращает JSX-разметку компонента. ✅ componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события. 2️⃣ Обновление (Updating): ✅ static getDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами. ✅ shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности. ✅ render(): Ререндер компонента на основе новых пропсов или состояния. ✅ getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления. ✅ componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния. 3️⃣ Размонтирование (Unmounting): ✅ componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы. Пример:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // Синхронизация состояния с пропсами
    if (nextProps.count !== prevState.count) {
      return { count: nextProps.count };
    }
    return null;
  }

  componentDidMount() {
    // Выполнение действий после монтирования
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизация перерисовки
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Сохранение информации о DOM
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Выполнение действий после обновления
    console.log('Component updated');
  }

  componentWillUnmount() {
    // Очистка ресурсов перед удалением компонента
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

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

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

Создайте форму входа в систему с помощью HTML и CSS

Создаем галерею с красивым эффектом наведения, используя только HTML и CSS 👨‍💻

Трюки при работе с SVG SVG предоставляет довольно гибкий API для реализации интересных анимаций и эффектов в вебе. Вот несколько примеров, которые помогут вам в этом разобраться.

Анимированная кнопка, выполненная с помощью CSS, SVG и JavaScript.

Что такое Java Virtual Machine (JVM)? Как она работает? Спросят с вероятностью 8% 👉 Java Virtual Machine (JVM) - это среда выполнения, которая позволяет запускать приложения на Java на любой платформе, где установлена JVM. 👉 JVM берет скомпилированный Java-код (байт-код) и интерпретирует его в машинный код на конкретной платформе. Он выполняет различные задачи, включая загрузку классов, управление памятью, выполнение потоков, оптимизацию кода и многое другое. Когда Java-приложение запускается на JVM, оно получает доступ к обширному набору библиотек Java, предоставляющих готовые классы и методы для решения различных задач. Благодаря JVM Java считается одним из самых надежных и масштабируемых языков программирования.

Crazy Pie Chart Диаграмма, созданная из svg-картинки и анимированная при помощи библиотеки d3.

💻Postgres.js — быстрый полнофункциональный клиент PostgreSQL для Node.js, Deno, Bun и CloudFlare