使用容器和展示組件構建更好的 React Native 應用程序
作為 React 或 React Native 開發人員，了解容器和展示組件的概念非常重要。
這些設計模式有助於正確分離關注點。您可以使用此概念來確保以更易於維護和擴展的方式構建代碼。
什麼是容器組件？
容器組件，也稱為智能組件，負責管理應用程序中的數據和邏輯。它們處理諸如從 API 獲取數據、更新狀態和處理用戶交互等任務。
要實現此結構，您可以使用 React-Redux 等庫將您的組件連接到商店，並將數據和操作向下傳遞到您的子組件或展示組件。
什麼是展示組件？
展示組件負責顯示來自其父組件的數據。它們通常是無狀態的，專注於 UI 和數據的可視化表示。
這種狀態使它們易於操作和測試，為它們贏得了啞組件的名稱。表示組件的啞狀態使您可以在整個應用程序中重用它們。這避免了糟糕和重複的代碼。
為什麼使用容器和展示組件？
這個問題的簡短答案是：關注點分離。這是幾個範例中的關鍵原則，包括面向對象、函數式和麵向方面的編程。然而，許多 React 開發人員傾向於忽略這些概念並選擇編寫能正常工作的代碼。
能正常工作的代碼很棒，直到它停止工作。組織不良的代碼更難維護和更新。這可能會使添加新功能或引入其他程序員參與項目變得棘手。修復這些問題一旦產生是一項工作量，最好從一開始就防止它們發生。
應用容器和展示組件設計模式可確保項目中的每個組件都有一個明確的任務來處理。這實現了模塊化結構，其中每個優化的組件組合在一起以完善您的應用程序。
您的組件可能仍然重疊；容器和展示組件之間的職責劃分並不總是截然不同的。但是，作為一般規則，您應該將展示組件的重點放在可視化數據上，將容器組件的重點放在數據和邏輯上。
如何在 React Native 中使用容器和展示組件
在典型的 React Native 應用程序中，創建包含表示和邏輯相關代碼的組件是很常見的。您可能會從一個 API 獲取數據、管理表單的狀態並在一個類中顯示輸出。考慮一個簡單的應用程序，它將從 API 獲取用戶列表並顯示他們的姓名和年齡。
您可以使用單個組件執行此操作，但這會導致代碼難以閱讀、不可重用，並且更難測試和維護。
例如：
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
在此示例中，UserList負責管理輸入字段的狀態、從 API 獲取數據以及呈現數據。
實現這一點的更好、更有效的方法是將 UserList 中的邏輯分離為表示和容器組件。
您可以創建一個UserListContainer組件來負責獲取和管理用戶數據。然後它可以將此數據作為道具傳遞給表示組件UserList 。
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
您可以在兩個表示組件之間分離表示：User和UserList。每個人都負責根據他們收到的輸入道具簡單地生成標記。
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
新代碼將原始組件分為兩個表示組件User和UserList，以及一個容器組件UserListContainer。
實施容器和展示組件的最佳實踐
當您使用容器和展示組件時，遵循一些最佳實踐以確保組件按預期工作非常重要。
- 每個組件都應該有明確和具體的作用。容器組件應該管理狀態，展示組件應該處理視覺展示。
- 在可能的情況下，使用功能組件而不是類組件。它們更簡單，更容易測試，並提供更好的性能。
- 避免在組件中包含與其用途無關的邏輯或功能。這有助於保持組件集中並易於維護和測試。
- 使用 props 進行組件之間的通信，清楚地分離關注點並避免緊密耦合的組件。
- 不必要的狀態更新會導致性能問題，因此只在必要時更新狀態很重要。
遵循這些最佳實踐可確保您的容器和展示組件有效地協同工作，以提供一個乾淨、有組織且可擴展的解決方案，用於管理 React Native 應用程序中的狀態和視覺展示。
使用容器和展示組件的好處
容器和展示組件可以提供多種好處。它們可以幫助改善您的代碼結構、可維護性和可擴展性。它們還可以促進團隊之間更好的協作和任務委派。它們甚至可以提高您的 React Native 應用程序的性能和優化。
遵循實現這些組件的最佳實踐，您可以構建更好、更具可擴展性的 React Native 應用程序。
發佈留言