Трохи запізнюємось на вечірку, але ось більш вичерпна відповідь із прикладами:
Реагуйте
React - це бібліотека інтерфейсу, що базується на компонентах, яка використовує "тінь DOM" для ефективного оновлення DOM із тим, що змінилося, замість того, щоб перебудувати все дерево DOM для кожної зміни. Спочатку він був побудований для веб-додатків, але тепер може використовуватися і для мобільних пристроїв, і для 3D / vr.
Компоненти між React і React Native не можуть бути замінені, оскільки React Native відображає власні мобільні елементи інтерфейсу, але бізнес-логіку та код, не пов’язаний з візуалізацією, можуть бути використані повторно.
ReactDOM
Спочатку був включений до бібліотеки React, але був роз'єднаний, коли React використовувався для інших платформ, крім простого Інтернету. Він служить точкою входу до DOM і використовується в союзі з React.
Приклад:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<div>
{this.state.data.map((data) => (
<p key={data.id}>{data.label}</p>
))}
<button onClick={this.clearData}>
Clear list
</button>
</div>
);
}
}
ReactDOM.render(App, document.getElementById('app'));
Реагуйте рідні
React Native - це платформа для мобільних платформ, яка використовує React і спілкується між Javascript та його рідним партнером через "міст". Завдяки цьому, багато структури структури інтерфейсу повинні відрізнятися при використанні React Native. Наприклад: створюючи список, ви зіткнетесь з основними проблемами продуктивності, якщо ви спробуєте використати mapдля складання списку замість React Native'sFlatList . React Native можна використовувати для створення мобільних додатків IOS / Android, а також для смарт-годинників та телевізорів.
Експо
Expo - це найкраще, коли запускається новий додаток React Native.
Expo - це рамка та платформа для універсальних додатків React. Це набір інструментів і сервісів, побудованих навколо React Native та нативних платформ, які допомагають вам розробляти, створювати, розгортати та швидко ітератувати в додатках для iOS, Android та веб-сайтів.
Примітка: Під час використання Expo ви можете використовувати лише Native Api, які вони надають. Усі додаткові бібліотеки, які ви включаєте, повинні мати чистий JavaScript або вам потрібно буде вийняти експо.
Аналогічний приклад використання React Native:
import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
/>
<Button title="Clear list" onPress={this.clearData}></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Відмінності:
- Зауважте, що все поза візуалізації може залишатися незмінним, ось чому логічний код бізнес-логіки / життєвого циклу можна повторно використовувати в React і React Native
- У React Native всі компоненти потрібно імпортувати з рідної реакції чи іншої бібліотеки інтерфейсу користувача
- Використання певних API, які відображають на рідні компоненти, як правило, буде більш ефективним, ніж намагатися обробити все на стороні javascript. колишній відображення компонентів для складання списку проти використання плоского списку
- Тонкі відмінності: такі речі, як
onClickперетворюються наonPress , React Native використовує таблиці стилів для більш стильного визначення стилів, а React Native використовує flexbox як структуру макета за замовчуванням, щоб тримати реакцію на речі.
- Оскільки в React Native не існує традиційного "DOM", лише чисті бібліотеки javascript можуть використовуватися як у React, так і React Native
React360
Варто також зазначити, що React також можна використовувати для розробки 3D / VR додатків. Структурна складова дуже схожа на React Native. https://facebook.github.io/react-360/
