tg-me.com/frontendInterview/4721
Last Update:
Для чего был создан react?
React — это библиотека JavaScript для построения пользовательских интерфейсов, разработанная Facebook. 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;
👉 @frontendInterview
BY Frontend Interview - собеседования по Javascript / Html / Css
Share with your friend now:
tg-me.com/frontendInterview/4721