Немного опоздал на вечеринку, но вот более полный ответ с примерами:
реагировать
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 Native - это кроссплатформенная мобильная платформа, которая использует React и обменивается данными между Javascript и его нативным аналогом через «мост». В связи с этим при использовании React Native многие структуры пользовательского интерфейса должны отличаться. Например: при создании списка вы столкнетесь с серьезными проблемами с производительностью, если попытаетесь использовать mapего вместо React Native.FlatList . React Native можно использовать для создания мобильных приложений для IOS / Android, а также для умных часов и телевизоров.
Экспо
Expo - это начало работы с новым приложением React Native.
Expo - это фреймворк и платформа для универсальных приложений React. Это набор инструментов и сервисов, созданных на основе React Native и нативных платформ, которые помогают разрабатывать, создавать, развертывать и быстро выполнять итерации для iOS, Android и веб-приложений.
Примечание: при использовании Expo вы можете использовать только те API, которые они предоставляют. Все дополнительные библиотеки, которые вы включаете, должны быть чисто javascript или вам нужно будет выставить expo.
Тот же пример с использованием 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. ех. сопоставление компонентов для построения списка с использованием flatlist
- Тонкие различия: такие вещи, как
onClickпревращение onPress, React Native использует таблицы стилей для более эффективного определения стилей, а React Native использует flexbox в качестве структуры макета по умолчанию, чтобы обеспечить адаптивность.
- Поскольку в React Native нет традиционного DOM, для React и React Native могут использоваться только чистые библиотеки javascript.
React360
Стоит также отметить, что React также можно использовать для разработки 3D / VR-приложений. Структура компонентов очень похожа на React Native. https://facebook.github.io/react-360/
