📌В чём разница между классической функцией и стрелочной?

💬 Спрашивают в 20% собеседований

Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

1️⃣ Синтаксис

➕ Классическая функция:

function add(a, b) {
  return a + b;
}

➕Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения.

2️⃣ Контекст this

В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.

➕ Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

➕Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

3️⃣ Конструктор

Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке.

➕ Пример с классической функцией:

function Person(name) 
{
  this.name = name;
}
const person = new Person("Alice");

➕ Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4️⃣ Аргументы

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

🤔 Итог:

Основные различия между классическими и стрелочными функциями заключаются в синтаксисе, поведении this, использовании в качестве конструктора и доступе к аргументам функции. Стрелочные функции предлагают более краткий синтаксис и удобны для написания коротких функций, а также при работе с контекстом this в обратных вызовах и замыканиях. Однако для более сложных сценариев, требующих использования this в различных контекстах или создания конструкторов, предпочтительнее использовать классические функции.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое макро и микро задачи?

💬 Спрашивают в 20% собеседований

Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.

1️⃣ Микро-задачи (Microtasks)

Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу.

🤔 Примеры:

➕ then, catch, finally

➕ queueMicrotask()

2️⃣ Макро-задачи (Macrotasks)

Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче.

🤔 Примеры:

➕ setTimeout

➕ setInterval

➕ setImmediate (Node.js)

➕ I/O операции

➕ Интерактивные действия, такие как клики мыши и нажатия клавиш

🤔 Различия и порядок выполнения

Основное различие между макро- и микро-задачами заключается в их приоритете выполнения:

➕ После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами.

➕ Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.

➕ Пример:

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

🤔 Итог:

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое this?

💬 Спрашивают в 17% собеседований

this является ключевым словом, которое используется в функциях и методах и указывает на объект, в контексте которого они были вызваны.Его значение зависит от того, как именно вызывается функция, и может изменяться в различных контекстах выполнения.

🤔Контексты использования:

1️⃣ Глобальный контекст:

В глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

console.log(this === window); // в браузере вернет true

2️⃣ Функции (не строгий режим):

В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3️⃣ Методы объекта:

Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4️⃣ Конструкторы:

В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

function Person(name) {
      this.name = name;
    }
    const person = new Person("Alice");
    console.log(person.name); // Alice

5️⃣ Стрелочные функции:

Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6️⃣ Явное привязывание:

С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

🤔 Итог:

Важность понимания this
Понимание механизма его работы важно для эффективного использования, особенно при работе с объектно-ориентированным кодом и при создании сложных веб-приложений, где часто требуется контролировать контекст выполнения функций и методов.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Для чего был создан react?

💬 Спрашивают в 3% собеседований

React — это библиотека JavaScript для построения пользовательских интерфейсов, разработанная Facebook. React был создан для решения ряда проблем, с которыми сталкивались разработчики веб-приложений, особенно в крупных и динамических проектах. Давайте рассмотрим ключевые цели и преимущества, которые мотивировали создание React:

🤔 Основные причины создания React:

1️⃣ Компонентный подход:

➕ Проблема: Разработка крупных веб-приложений становится сложной из-за сложности управления состоянием и взаимосвязями между различными частями пользовательского интерфейса.

➕ Решение: React использует компонентный подход, который разбивает интерфейс на небольшие, изолированные и переиспользуемые компоненты. Каждый компонент управляет своим состоянием и логикой, что упрощает разработку и поддержку кода.

2️⃣ Виртуальный DOM:

➕ Проблема: Операции с реальным DOM медленные и неэффективные, особенно при частых обновлениях пользовательского интерфейса.

➕ Решение: React внедряет концепцию виртуального DOM, который представляет собой легковесную копию реального DOM. React сначала обновляет виртуальный DOM, затем вычисляет разницу (diff) с реальным DOM и минимально обновляет реальный DOM, что значительно повышает производительность.

3️⃣ Однонаправленный поток данных:

➕ Проблема: Двусторонняя привязка данных в крупных приложениях может привести к сложностям в отслеживании изменений и ошибок.

➕ Решение: React использует однонаправленный поток данных, где данные передаются вниз по дереву компонентов через свойства (props), а события и изменения поднимаются вверх. Это делает управление состоянием и данными более предсказуемым и легким для понимания.

🤔 Компонентный подход:

// Определение простого компонента
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Использование компонента
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

🤔 Виртуальный DOM:

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

// Компонент, который обновляет состояние и интерфейс
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

🤔 Однонаправленный поток данных:

// Компонент родитель
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'Initial Value' };
  }

  handleChange = (newValue) => {
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <ChildComponent value={this.state.value} onChange={this.handleChange} />
      </div>
    );
  }
}

// Компонент потомок
function ChildComponent(props) {
  return (
    <div>
      <input
        type="text"
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
      />
    </div>
  );
}

export default ParentComponent;

🤔 Заключение

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как отрисовать компонент по условию?

💬 Спрашивают в 6% собеседований

В React отрисовка компонентов по условию осуществляется с помощью условных операторов JavaScript внутри JSX. Это позволяет отображать компоненты или элементы только тогда, когда выполняется определенное условие. Рассмотрим несколько способов условной отрисовки компонентов в React.

1️⃣ Использование тернарного оператора

Тернарный оператор ? : позволяет компактно проверять условие и отрисовывать один из двух компонентов.

🤔 Пример:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        </div>
    );
};

export default MyComponent;

2️⃣ Логическое И (&&)

Можно использовать логический оператор && для отрисовки компонента только тогда, когда условие истинно.

🤔 Пример:

import React from 'react';
const MyComponent = ({ showDetails }) => {
    return (
        <div>
            <h1>Item</h1>
            {showDetails && <p>Here are the details...</p>}
        </div>
    );
};
export default MyComponent;

3️⃣ Условный рендеринг с if...else

Для более сложной логики условного рендеринга можно использовать обычные операторы if...else внутри функции компонента.

🤔 Пример:

import React from 'react';
const MyComponent = ({ status }) => {
    if (status === 'loading') {
        return <p>Loading...</p>;
    } else if (status === 'error') {
        return <p>Error occurred!</p>;
    } else if (status === 'success') {
        return <p>Data loaded successfully!</p>;
    } else {
        return null; // Возвращаем null, чтобы не отрисовывать ничего
    }
};
export default MyComponent;

4️⃣ Условный рендеринг с помощью функций

Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.

🤔 Пример:

import React from 'react';
const renderContent = (status) => {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'error':
            return <p>Error occurred!</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        default:
            return null;
    }
};
const MyComponent = ({ status }) => {
    return (
        <div>
            {renderContent(status)}
        </div>
    );
};
export default MyComponent;

5️⃣ Использование IIFE (немедленно вызываемые функциональные выражения)

Можно использовать IIFE (Immediately Invoked Function Expression) для выполнения более сложной логики рендеринга внутри JSX.

🤔 Пример:

import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
    return (
        <div>
            {(() => {
                if (isLoggedIn) {
                    return <p>Welcome back, {userName}!</p>;
                } else {
                    return <p>Please log in.</p>;
                }
            })()}
        </div>
    );
};
export default MyComponent;

🤔 Итог

Условная отрисовка компонентов в React может быть выполнена различными способами, в зависимости от сложности логики и предпочтений:

1️⃣ Тернарный оператор: Компактный и удобный для простых условий.
2️⃣ Логическое И (&&): Легкий способ отрисовать компонент, если условие истинно.
3️⃣ if...else: Подходит для более сложной логики.
4️⃣ Функции: Помогают структурировать код и повторно использовать логику.
5️⃣ IIFE: Используются для более сложных выражений внутри JSX.

Короче говоря: Для условной отрисовки компонентов в React используйте тернарный оператор, логическое И, if...else, функции или IIFE. Выбор метода зависит от сложности условий и структуры кода.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какой классовый компонент не нужен при использовании хуков?

💬 Спрашивают в 3% собеседований

С появлением хуков (hooks) в React стало возможным использовать функциональные компоненты вместо классовых для выполнения задач, которые ранее могли быть реализованы только в классовых компонентах. Благодаря хукам, большинство классовых компонентов могут быть заменены функциональными компонентами. Рассмотрим, какие классовые компоненты становятся ненужными при использовании хуков и как они могут быть преобразованы.

🤔 Основные хуки, заменяющие классовые компоненты

1️⃣ useState:

➕ Позволяет использовать состояние в функциональных компонентах.

Классовый компонент:

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

     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };

     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.increment}>Increment</button>
         </div>
       );
     }
   }
   

Функциональный компонент с `useState`:

   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   

2️⃣ useEffect:

➕ Замена методов жизненного цикла, таких как componentDidMount, componentDidUpdate и componentWillUnmount.

Классовый компонент:

   class DataFetcher extends React.Component {
     constructor(props) {
       super(props);
       this.state = { data: null };
     }

     componentDidMount() {
       fetchData().then(data => {
         this.setState({ data });
       });
     }

     render() {
       return <div>Data: {this.state.data}</div>;
     }
   }
   

Функциональный компонент с `useEffect`:

   import React, { useState, useEffect } from 'react';

   function DataFetcher() {
     const [data, setData] = useState(null);

     useEffect(() => {
       fetchData().then(data => {
         setData(data);
       });
     }, []); // Пустой массив означает, что эффект выполняется только при монтировании

     return <div>Data: {data}</div>;
   }
   

3️⃣ useContext:

➕ Позволяет использовать контекст в функциональных компонентах, заменяя необходимость использования contextType или Context.Consumer.

Классовый компонент:

   const MyContext = React.createContext();

   class MyComponent extends React.Component {
     render() {
       return (
         <MyContext.Consumer>
           {value => <div>{value}</div>}
         </MyContext.Consumer>
       );
     }
   }
   

Функциональный компонент с `useContext`:

   import React, { useContext } from 'react';

   const MyContext = React.createContext();

   function MyComponent() {
     const value = useContext(MyContext);
     return <div>{value}</div>;
   }
   

🤔 Примеры других хуков:

➕ useReducer: Альтернатива useState для сложных состояний и логики обновления.

➕ useMemo: Мемоизация значений для оптимизации производительности.

➕ useCallback: Мемоизация функций для оптимизации производительности.

➕ useRef: Создание ссылок для доступа к DOM-элементам или хранения мутирующих значений без повторного рендера.

🤔 Заключение

С введением хуков в React большинство классовых компонентов становятся ненужными, так как их функциональность может быть реализована с помощью функциональных компонентов и хуков. Это упрощает код, улучшает читаемость и поддержку, а также предоставляет более гибкие возможности для управления состоянием и жизненным циклом компонентов.

Коротко: Благодаря хукам, такие как useState, useEffect и useContext, большинство классовых компонентов в React могут быть заменены функциональными компонентами, что упрощает и улучшает код.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что не стоит писать в рендере?

💬 Спрашивают в 3% собеседований

В методе render (или в теле функционального компонента) в React не следует писать код, который выполняет побочные эффекты или вызывает ресурсоёмкие операции. Метод render должен быть чистым и идемпотентным, что означает, что его выполнение не должно изменять состояние компонента или вызывать другие побочные эффекты. Вот несколько примеров того, чего следует избегать в методе render:

1️⃣ Выполнение побочных эффектов

Побочные эффекты включают операции, которые изменяют состояние, делают запросы к серверу, подписываются на события или манипулируют DOM напрямую. Для этих целей следует использовать хуки, такие как useEffect, или методы жизненного цикла классовых компонентов, такие как componentDidMount и componentDidUpdate.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не делайте запросы в render
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    return <div>Rendering...</div>;
  }
}

2️⃣ Изменение состояния (setState)

Изменение состояния компонента внутри метода render приведет к бесконечному циклу рендеринга.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не вызывайте setState в render
    this.setState({ someState: 'newValue' });

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  someMethod() {
    this.setState({ someState: 'newValue' });
  }

  render() {
    return <div onClick={() => this.someMethod()}>Rendering...</div>;
  }
}

3️⃣ Выполнение дорогостоящих вычислений

Метод render должен быть быстрым и легким, чтобы поддерживать высокую производительность. Дорогостоящие вычисления могут замедлить рендеринг.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Избегайте долгих вычислений в render
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }

    return <div>Result: {result}</div>;
  }
}

🤔 Правильный подход:

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

  expensiveCalculation() {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result;
  }

  render() {
    return <div>Result: {this.state.result}</div>;
  }
}

4️⃣ Прямое манипулирование DOM
React управляет DOM за вас, поэтому вам не нужно и не следует манипулировать DOM напрямую в методе render. Вместо этого используйте состояние и пропсы для управления рендерингом.

🤔 Что не делать:

class MyComponent extends React.Component {
  render() {
    // Не манипулируйте DOM напрямую в render
    document.getElementById('some-id').textContent = 'New Text';

    return <div>Rendering...</div>;
  }
}

🤔 Правильный подход:

class MyComponent extends React.Component {
  render() {
    return <div id="some-id">New Text</div>;
  }
}

🤔 Заключение

Метод render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Зачем нужна библиотека react контекст?

💬 Спрашивают в 3% собеседований

Библиотека React Context (React.createContext) предоставляет способ передачи данных через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Она полезна для управления состоянием, которое должно быть доступно во многих частях приложения, не пропуская его через каждый уровень компонентов.

🤔 Основные случаи использования React Context:

1️⃣ Глобальное состояние:

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

2️⃣ Темизация:

➕ Context позволяет легко управлять темами (например, светлая/темная тема) и применять их к разным компонентам без необходимости передавать тему через пропсы.

3️⃣ Аутентификация:

➕ Context может быть использован для хранения и передачи информации о текущем пользователе и его аутентификационном статусе.

4️⃣ Настройки локализации:

➕ Context позволяет управлять и передавать текущие языковые настройки, обеспечивая локализацию и интернационализацию приложения.

🤔 Примеры использования React Context:

1️⃣ Создание и использование контекста для темы

🤔 Создание контекста:

import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

🤔 Использование Provider для предоставления значения контекста:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Themed Button</button>}
    </ThemeContext.Consumer>
  );
}

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

2️⃣ Использование хуков с контекстом

🤔 Создание контекста:

import React from 'react';

const UserContext = React.createContext(null);

🤔 Использование хука useContext для получения значения контекста:

import React, { useContext } from 'react';

function App() {
  const user = { name: 'Alice', loggedIn: true };

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = useContext(UserContext);

  return (
    <div>
      {user ? (
        <p>Welcome, {user.name}!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

🤔 Преимущества использования React Context:

1️⃣ Упрощает управление состоянием:

➕ Context позволяет избегать "prop drilling" — необходимости передавать пропсы через множество уровней компонентов.

2️⃣ Повышает читаемость и поддержку кода:

➕ Централизованное управление состоянием и данными улучшает читаемость и упрощает поддержку кода.

🤔 Когда не следует использовать React Context:

1️⃣ Избыточное использование:

➕ Контекст не следует использовать для данных, которые изменяются часто или предназначены только для узкой области компонента. Частые изменения данных в контексте могут привести к избыточному рендерингу компонентов.

2️⃣ Сложные состояния:

➕ Для управления сложными состояниями и побочными эффектами лучше использовать специализированные библиотеки, такие как Redux или MobX.

🤔 Заключение

React Context предоставляет мощный инструмент для управления состоянием и данными, которые должны быть доступны во многих частях приложения, без необходимости пропускать их через каждый уровень компонентов. Это упрощает управление глобальным состоянием и улучшает структуру и читаемость кода.

Коротко: Библиотека React Context позволяет передавать данные через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне, что упрощает управление глобальным состоянием и улучшает читаемость кода.


🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Зачем нужен ref?

💬 Спрашивают в 3% собеседований

В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.

🤔 Основные случаи использования `ref`:

➕ Доступ к DOM-элементам:

➕ Использование в сторонних библиотеках:

➕ Сохранение состояния вне дерева компонентов:

🤔 Примеры использования `ref`:

1️⃣ Доступ к DOM-элементам

Установка фокуса на элемент:

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

2️⃣ Получение размеров элемента

Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

3️⃣ Использование в классовых компонентах

Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🤔 Важно помнить

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

➕ Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.

➕ Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.

🤔 Заключение

ref в React предоставляет способ прямого доступа к DOM-элементам или компонентам. Он полезен для манипуляции с элементами, интеграции со сторонними библиотеками и сохранения информации вне состояния компонента. Тем не менее, ref следует использовать с осторожностью, чтобы не нарушить декларативный подход React.

Коротко: ref в React используется для доступа к DOM-элементам или компонентам напрямую, что позволяет выполнять операции, которые не могут быть выполнены через декларативный подход React.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Где писать запросы к серверу?

💬 Спрашивают в 3% собеседований

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

1️⃣ Компоненты

Запросы к серверу часто выполняются непосредственно в компонентах. Для этого можно использовать хуки или методы жизненного цикла классовых компонентов.

🤔 Использование хуков

useEffect:
useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🤔 Методы жизненного цикла в классовых компонентах

componentDidMount:

Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

2️⃣ Сервисы или утилиты

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

service.js:

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js:

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

3️⃣ Управление состоянием

Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX.


🤔 Заключение

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

🤔 Краткое объяснение

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых