從 React.js 過渡到 React Native

介紹

作為具有 React.js 經驗的前端開發人員，擴展您的技能以包括 React Native 可以為行動應用程式開發帶來令人興奮的機會。雖然網路和行動開發有一些相似之處，但也存在一些關鍵差異，這些差異可能會影響我們處理每個平台的方式。本文將介紹 Web 和行動開發之間的主要差異、React.js 和 React Native 之間的差異，以及最重要的是，您對 React.js 的了解如何幫助您順利過渡到 React Native。

了解 Web 和行動開發之間的差異

在深入研究 React.js 和 React Native 的細節之前，了解 Web 和行動開發的差異至關重要。

1. 特定於平台的注意事項

• Web 開發：在 Web 開發中，應用程式被建構為在瀏覽器上運行，使用者互動通常透過滑鼠或鍵盤完成。
• 行動開發：另一方面，行動應用程式需要考慮觸控互動、較小的螢幕和特定於裝置的效能。行動應用程式還可以存取相機、GPS 和感測器等裝置功能，這些功能通常與網路應用程式無關。

2. 部署

• Web 開發：建置 Web 應用程式後，部署通常涉及將其託管在伺服器上以透過瀏覽器存取。
• 行動開發：對於行動應用程序，您需要透過應用程式商店（例如 Google Play、App Store）部署它們，這會引入其他注意事項，例如應用程式商店審批流程。

3.使用者體驗

• Web 開發：網路上的使用者體驗考慮重點是不同的裝置螢幕尺寸、回應能力和瀏覽器相容性。
• 行動開發：行動用戶體驗更注重提供流暢的互動、觸控手勢，並遵守特定於平台的設計指南（例如，Android 的材料設計、iOS 的人機介面指南）。

React.js 與 React Native：主要區別

React.js 和 React Native 都是由 Facebook 建構的，具有共同的理念，但它們在幾個方面有所不同。

1. 目的

• React.js：主要用於建立 Web 應用程式。
• React Native：專為使用單一程式碼庫建立 iOS 和 Android 原生行動應用程式而設計。

2. 架構

• React.js：遵循典型的模型-視圖-控制器（MVC）架構。它使用 Virtual DOM 來管理更新，從而在瀏覽器中實現高效能和高效渲染。
• React Native：使用「橋」架構。該橋允許 JavaScript 程式碼與本機 API 非同步通信，從而使 React Native 能夠渲染本機 UI 元件。該架構依賴三個主要線程：
  • JavaScript 執行緒：執行應用程式的 JavaScript 程式碼。
  • 本機模組執行緒：與裝置感測器、檔案系統等本機模組互動
  • UI Thread（主執行緒）：負責渲染 UI 元件並處理使用者互動。

3. 渲染

• React.js：使用虛擬 DOM 來管理更新並在瀏覽器中高效渲染 Web 元件。

// React.js Example of Virtual DOM Rendering
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

• React Native：不使用 DOM。相反，它與本機 API 通訊並直接渲染行動元件（本機視圖），為使用者提供真正本機應用程式的體驗。

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

4. 造型

• React.js：您可以使用 CSS 或 CSS-in-JS 函式庫（如樣式元件）來設定 Web 元件的樣式。

// React.js Example
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <h1 className="title">Hello, React.js!</h1>
    </div>
  );
};

export default App;

// App.css
.container {
  padding: 20px;
  text-align: center;
}

.title {
  font-size: 2rem;
  color: #333;
}

• React Native：React Native 使用 JavaScript 物件定義樣式，而不是 CSS，這些樣式會對應到 Flexbox 等本機樣式元素進行佈局。

// React Native Example
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    color: '#333',
  },
});

export default App;

5. 導航

• React.js：使用 React Router 等函式庫進行導覽。 Web 導航主要基於 URL，因此使用瀏覽器歷史記錄很簡單。

// React.js Example using React Router
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

• React Native：由於本機移動範例，導航更加複雜。它使用 React Navigation 或 Native Navigation 等程式庫，這些程式庫支援類似於本機應用程式中的基於堆疊的導航模式。

// React Native Example using React Navigation
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, Text, View } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to About" onPress={() => navigation.navigate('About')} />
  </View>
);

const AboutScreen = () => (
  <View>
    <Text>About Screen</Text>
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="About" component={AboutScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

6. 庫和元件

• React.js：依賴標準 HTML 元素，如
  、

  等以及瀏覽器 API。

  // React.js Button Example
  import React from 'react';
  
  const App = () => {
    return (
      <div>
        <button onClick={() => alert('Button clicked!')}>Click Me</button>
      </div>
    );
  };
  
  export default App;
  

  • React Native：提供內建的行動元件，例如 、 和 ，它們類似於 HTML 元素，但針對行動應用效能進行了客製化。

  // React Native Button Example
  import React from 'react';
  import { View, Text, TouchableOpacity } from 'react-native';
  
  const App = () => {
    return (
      <View>
        <TouchableOpacity onPress={() => alert('Button clicked!')}>
          <Text>Click Me</Text>
        </TouchableOpacity>
      </View>
    );
  };
  
  export default App;
  

  7. 設備訪問

  此範例展示了 React Native 如何輕鬆存取裝置的攝影機——如果沒有特定於瀏覽器的 API，該功能在 Web 開發中並不容易實現。
  

  // React Native Example using the Camera
  import React, { useState, useEffect } from 'react';
  import { View, Text, Button } from 'react-native';
  import { Camera } from 'expo-camera';
  
  const CameraExample = () => {
    const [hasPermission, setHasPermission] = useState(null);
    const [cameraRef, setCameraRef] = useState(null);
  
    useEffect(() => {
      (async () => {
        const { status } = await Camera.requestPermissionsAsync();
        setHasPermission(status === 'granted');
      })();
    }, []);
  
    if (hasPermission === null) {
      return <Text>Requesting camera permission...</Text>;
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>;
    }
  
    return (
      <View>
        <Camera ref={ref => setCameraRef(ref)} style={{ height: 400 }} />
        <Button
          title="Take Picture"
          onPress={async () => {
            if (cameraRef) {
              let photo = await cameraRef.takePictureAsync();
              console.log(photo);
            }
          }}
        />
      </View>
    );
  };
  
  export default CameraExample;
  
  

  八、開發環境

  • React.js 開發:
    對於 React.js，您通常會使用 create-react-app 或 Next.js 等工具來啟動開發環境。不需要特定於行動裝置的 SDK。

  • React Native開發:
    對於 React Native，您要么需要 Expo CLI（對於初學者來說更容易），要么需要直接的本機開發設置，例如 Android Studio 或 Xcode。

  如您所見，組件結構相似，但實際組件不同。這是因為 React Native 使用直接對應到特定於平台的視圖的本機元件，而 React.js 使用在瀏覽器中呈現的 HTML 元素。

  學習 React.js 如何幫助您過渡到 React Native

  對於 React.js 開發人員來說，好消息是過渡到 React Native 是一個自然的過程。您已經熟悉的許多概念和原則都適用於行動開發。

  1. 基於組件的架構

  React Native 共享 React.js 的元件驅動架構，這意味著將應用程式分解為可重複使用元件的想法保持不變。您仍將使用函數式和類別元件，以及 useState 和 useEffect 等掛鉤。

  2. 狀態管理

  如果您一直在 React.js 中使用 Redux、Context API 或任何其他狀態管理程式庫，則相同的原則也適用於 React Native。您將以熟悉的方式處理狀態和資料流，從而簡化學習曲線。

  3. 程式碼可重用性

  使用 React Native，您可以重複使用現有 JavaScript 邏輯的很大一部分。雖然 UI 元件不同，但您的大部分業務邏輯、API 呼叫和狀態管理都可以在 Web 和行動應用程式中重複使用。

  4.JSX 語法

  JSX 是 React.js 和 React Native 的基礎。因此，如果您習慣編寫 JSX 來創建使用者介面，那麼您會在 React Native 中感到賓至如歸。

  5. 共享生態系統

  更廣泛的 React 生態系統——React Navigation、React Native Paper 等庫，甚至 Expo 等工具——允許無縫整合和更快的開發。如果您使用過 Web 程式庫，您將能夠利用 React Native 中的行動對應工具或類似工具。

  學習 React Native 的好處

  • 跨平台開發：React Native 的最大優勢之一是您可以使用單一程式碼庫為 iOS 和 Android 進行構建，從而減少對特定於平台的開發團隊的需求。

  • 效能：React Native 應用程式具有高效能，因為它們與本機API 互動並呈現本機UI 元件，這使得它們與使用Swift 或Java/Kotlin 建置的應用程式沒有什麼差別。

  • 活躍社群：React Native 擁有一個大型、活躍的社群。許多資源、第三方程式庫和工具可用於加快您的學習和開發流程。

  • 更快的上市時間：憑藉 React Native 的跨平台特性和程式碼可重用性，開發人員可以大幅減少啟動應用程式所需的時間。

  結論

  從 React.js 過渡到 React Native 對於任何希望將專業知識擴展到行動開發的前端開發人員來說都是一個有益的一步。雖然 Web 和行動應用程式在使用者互動、部署和設計方面有所不同，但 React.js 和 React Native 之間的共享原則，特別是在元件結構、狀態管理和 JSX 語法方面，使過渡更加順暢。透過學習 React Native，您不僅可以增強自己的技能，還可以為更有效地建立跨平台行動應用程式打開大門。

以上是從 React.js 過渡到 React Native的詳細內容。更多資訊請關注PHP中文網其他相關文章！