パーティーには少し遅れますが、例を挙げたより包括的な回答を次に示します。
反応する
ReactはコンポーネントベースのUIライブラリで、「シャドウDOM」を使用して、変更ごとにDOMツリー全体を再構築するのではなく、変更されたものでDOMを効率的に更新します。当初はウェブアプリ用に作成されましたが、現在はモバイルや3D / VRでも使用できます。
React NativeはネイティブモバイルUI要素にマップされますが、ビジネスロジックとレンダリングに関連しないコードを再利用できるため、ReactとReact Nativeの間のコンポーネントは交換できません。
ReactDOM
最初はReactライブラリーに含まれていましたが、ReactがWeb以外のプラットフォームで使用されるようになると分割されました。これは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を使用する場合、多くのUI構造を異なるものにする必要があります。例:リストmap
を作成するときに、React Nativeのリストの代わりに使用してリストを作成しようとすると、パフォーマンスに重大な問題が発生します。FlatList
。React Nativeは、IOS / Androidモバイルアプリの構築だけでなく、スマートウォッチやTVの構築にも使用できます。
万博
Expoは、新しいReact Nativeアプリを開始する際の必須条件です。
Expoはフレームワークであり、ユニバーサルReactアプリケーションのプラットフォームです。これは、React Nativeおよびネイティブプラットフォームを中心に構築されたツールとサービスのセットであり、iOS、Android、およびWebアプリでの開発、ビルド、デプロイ、および迅速な反復に役立ちます
注意: Expoを使用する場合は、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では、すべてのコンポーネントをreact-nativeまたは別のUIライブラリからインポートする必要があります
- ネイティブコンポーネントにマップする特定のAPIを使用すると、通常、JavaScript側ですべてを処理するよりもパフォーマンスが向上します。例:リストを作成するためのコンポーネントのマッピングとフラットリストの使用
- 微妙な違い:React Nativeはに
onClick
変わりonPress
、スタイルシートを使用してより高性能な方法でスタイルを定義し、React Nativeはflexboxをデフォルトのレイアウト構造として使用して応答性を維持します。
- React Nativeには従来の「DOM」がないため、純粋なjavascriptライブラリのみをReactとReact Nativeの両方で使用できます
React360
Reactは3D / VRアプリケーションの開発にも使用できることにも言及する価値があります。コンポーネントの構造は、React Nativeと非常によく似ています。https://facebook.github.io/react-360/