สายไปงานเลี้ยงเล็กน้อย แต่นี่เป็นคำตอบที่ครอบคลุมมากขึ้นด้วยตัวอย่าง:
เกิดปฏิกิริยา
React เป็นไลบรารี UI ที่ใช้คอมโพเนนต์ที่ใช้ "shadow DOM" เพื่ออัปเดต DOM อย่างมีประสิทธิภาพด้วยสิ่งที่มีการเปลี่ยนแปลงแทนที่จะสร้างทั้งต้นไม้ DOM ใหม่สำหรับการเปลี่ยนแปลงทุกครั้ง มันถูกสร้างขึ้นครั้งแรกสำหรับเว็บแอป แต่ตอนนี้สามารถใช้กับมือถือ & 3D / vr ได้เช่นกัน
ส่วนประกอบระหว่าง React และ React Native ไม่สามารถแลกเปลี่ยนได้เนื่องจาก React Native maps ไปยังองค์ประกอบ UI ของอุปกรณ์เคลื่อนที่บนมือถือ แต่ตรรกะทางธุรกิจและรหัสที่เกี่ยวข้องกับการไม่แสดงผลสามารถนำมาใช้ซ้ำได้
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 และเป็นแบบดั้งเดิมผ่านทาง "bridge" เนื่องจากสิ่งนี้โครงสร้าง UI จำนวนมากจึงต้องแตกต่างเมื่อใช้ React Native ตัวอย่างเช่นเมื่อมีการสร้างรายการคุณจะทำงานเป็นปัญหาประสิทธิภาพการทำงานที่สำคัญถ้าคุณพยายามที่จะใช้ในการสร้างรายชื่อแทนการตอบสนองของพื้นเมืองmap FlatListReact Native สามารถใช้สร้างแอพมือถือ IOS / Android รวมถึงสมาร์ทวอทช์และทีวี
งานแสดงสินค้า
Expo เป็น go-to เมื่อเริ่มต้นแอป React Native ใหม่
Expo เป็นกรอบและแพลตฟอร์มสำหรับแอปพลิเคชันตอบโต้สากล เป็นชุดเครื่องมือและบริการที่สร้างขึ้นรอบ ๆ React Native และแพลตฟอร์มดั้งเดิมที่ช่วยให้คุณพัฒนาสร้างปรับใช้และทำซ้ำอย่างรวดเร็วบน iOS, Android และเว็บแอป
หมายเหตุ:เมื่อใช้งาน Expo คุณสามารถใช้ Native Api ที่จัดให้เท่านั้น ห้องสมุดเพิ่มเติมทั้งหมดที่คุณรวมจะต้องเป็นจาวาสคริปต์ที่บริสุทธิ์หรือคุณจะต้องนำงานแสดงสินค้าออก
ตัวอย่างเดียวกันโดยใช้ 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 ของบางอย่างที่แมปไปยังองค์ประกอบดั้งเดิมมักจะมีประสิทธิภาพมากกว่าการพยายามจัดการทุกอย่างที่ด้านจาวาสคริปต์ อดีต คอมโพเนนต์การแม็พเพื่อสร้างรายการกับการใช้ flatlist
- ความแตกต่างเล็ก ๆ น้อย ๆ : สิ่งต่าง ๆ
onClickกลายเป็นonPressReact Native ใช้สไตล์ชีทเพื่อกำหนดสไตล์ในแบบที่มีประสิทธิภาพมากขึ้นและ React Native ใช้ flexbox เป็นโครงสร้างเค้าโครงเริ่มต้นเพื่อให้สิ่งต่าง ๆ ตอบสนอง
- เนื่องจากไม่มี "DOM" ดั้งเดิมใน React Native จึงสามารถใช้ไลบรารี javascript บริสุทธิ์ได้ทั้ง React และ React Native เท่านั้น
React360
นอกจากนี้ยังมีมูลค่าการกล่าวขวัญว่า React สามารถใช้ในการพัฒนาแอพพลิเคชั่น 3D / VR โครงสร้างส่วนประกอบคล้ายกับ React Native มาก https://facebook.github.io/react-360/
