Xây dựng các ứng dụng gốc phản ứng tốt hơn với các thành phần chứa và trình bày
Là nhà phát triển React hoặc React Native, điều quan trọng là phải hiểu khái niệm về vùng chứa và các thành phần trình bày.
Những mẫu thiết kế này giúp phân tách các mối quan tâm một cách thích hợp. Bạn có thể sử dụng khái niệm này để đảm bảo rằng bạn cấu trúc mã của mình theo cách dễ bảo trì và có thể mở rộng hơn.
Mục Lục
Thành phần vùng chứa là gì?
Thành phần vùng chứa, còn được gọi là thành phần thông minh, chịu trách nhiệm quản lý dữ liệu và logic trong ứng dụng của bạn. Chúng xử lý các tác vụ như tìm nạp dữ liệu từ API, cập nhật trạng thái và xử lý các tương tác của người dùng.
Để triển khai cấu trúc này, bạn có thể sử dụng thư viện chẳng hạn như React-Redux để kết nối các thành phần của bạn với cửa hàng và truyền dữ liệu cũng như hành động xuống các thành phần con hoặc thành phần trình bày của bạn.
Các thành phần trình bày là gì?
Các thành phần trình bày chịu trách nhiệm hiển thị dữ liệu từ các thành phần chính của chúng. Chúng thường không trạng thái và tập trung vào giao diện người dùng và biểu diễn trực quan của dữ liệu.
Trạng thái này giúp chúng dễ dàng thao tác và kiểm tra, khiến chúng được đặt tên là các thành phần ngu ngốc. Trạng thái ngớ ngẩn của các thành phần trình bày giúp bạn có thể sử dụng lại chúng trên toàn bộ ứng dụng của mình. Điều này tránh mã tệ hại và lặp đi lặp lại.
Tại sao nên sử dụng Container và các thành phần trình bày?
Câu trả lời ngắn gọn và đơn giản cho câu hỏi là: Tách biệt các mối quan tâm. Đây là nguyên tắc chính trong một số mô hình, bao gồm lập trình hướng đối tượng, chức năng và hướng khía cạnh. Tuy nhiên, nhiều nhà phát triển React có xu hướng bỏ qua các khái niệm này và chọn viết mã chỉ hoạt động.
Mã chỉ hoạt động là tuyệt vời, cho đến khi nó ngừng hoạt động. Mã tổ chức kém khó bảo trì và cập nhật hơn. Điều này có thể khiến việc thêm các tính năng mới hoặc mời các lập trình viên khác làm việc trong dự án trở nên khó khăn. Việc khắc phục các sự cố này sau khi đã được tạo là một khối lượng công việc và chúng nên được ngăn chặn tốt hơn ngay từ đầu.
Việc áp dụng mẫu thiết kế bộ chứa và thành phần trình bày đảm bảo rằng mọi thành phần trong dự án của bạn đều có nhiệm vụ rõ ràng mà nó xử lý. Điều này đạt được cấu trúc mô-đun trong đó từng thành phần được tối ưu hóa kết hợp với nhau để hoàn thiện ứng dụng của bạn.
Các thành phần của bạn vẫn có thể chồng lên nhau; sự phân chia nhiệm vụ giữa vùng chứa và thành phần trình bày không phải lúc nào cũng khác biệt. Tuy nhiên, theo nguyên tắc chung, bạn nên tập trung các thành phần trình bày của mình vào dữ liệu trực quan và các thành phần vùng chứa của bạn vào dữ liệu và logic.
Cách sử dụng Container và các thành phần trình bày trong React Native
Trong một ứng dụng React Native điển hình, người ta thường tạo các thành phần chứa cả mã trình bày và mã liên quan đến logic. Bạn có thể tìm nạp dữ liệu từ API, quản lý trạng thái của biểu mẫu và hiển thị tất cả đầu ra trong một lớp. Hãy xem xét một ứng dụng đơn giản sẽ tìm nạp danh sách người dùng từ API và hiển thị tên cũng như tuổi của họ.
Bạn có thể làm điều này với một thành phần duy nhất, nhưng nó sẽ dẫn đến mã khó đọc, không thể sử dụng lại cũng như khó kiểm tra và bảo trì hơn.
Ví dụ:
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;
Trong ví dụ này, Danh sách người dùng chịu trách nhiệm quản lý trạng thái của trường đầu vào, tìm nạp dữ liệu từ API và hiển thị dữ liệu.
Cách tốt hơn và hiệu quả hơn để thực hiện điều này là tách logic trong UserList thành các thành phần trình bày và vùng chứa.
Bạn có thể tạo một UserListContainer thành phần chịu trách nhiệm tìm nạp và quản lý dữ liệu người dùng. Sau đó, nó có thể chuyển dữ liệu này đến một thành phần trình bày, Danh sách người dùngnhư một chỗ dựa.
import React, { useState, useEffect } from 'react';
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;
Bạn có thể tách bản trình bày thành hai thành phần trình bày: Người dùng Và Danh sách người dùng. Mỗi người chịu trách nhiệm tạo đánh dấu đơn giản dựa trên các đạo cụ đầu vào mà họ nhận được.
import { View, Text, FlatList } from 'react-native';
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
Mã mới tách thành phần ban đầu thành hai thành phần trình bày, Người dùng Và Danh sách người dùngvà một thành phần vùng chứa, UserListContainer.
Các phương pháp hay nhất để triển khai các thành phần trình bày và vùng chứa
Khi bạn sử dụng các thành phần vùng chứa và trình bày, điều quan trọng là phải tuân theo một số phương pháp hay nhất để đảm bảo rằng các thành phần đó hoạt động như dự định.
- Mỗi thành phần nên có một vai trò rõ ràng và cụ thể. Thành phần vùng chứa sẽ quản lý trạng thái và thành phần trình bày sẽ xử lý bản trình bày trực quan.
- Nếu có thể, hãy sử dụng các thành phần chức năng thay vì các thành phần lớp. Chúng đơn giản hơn, dễ kiểm tra hơn và cung cấp hiệu suất tốt hơn.
- Tránh đưa logic hoặc chức năng vào một thành phần không liên quan đến mục đích của nó. Điều này giúp giữ cho các thành phần tập trung và dễ dàng bảo trì và kiểm tra.
- Sử dụng các đạo cụ để giao tiếp giữa các thành phần, tách biệt rõ ràng các mối quan tâm và tránh các thành phần được liên kết chặt chẽ.
- Các cập nhật không cần thiết cho trạng thái có thể dẫn đến các vấn đề về hiệu suất, vì vậy, điều quan trọng là chỉ cập nhật trạng thái khi cần thiết.
Làm theo các phương pháp hay nhất này đảm bảo rằng vùng chứa và các thành phần trình bày của bạn phối hợp hiệu quả với nhau để cung cấp giải pháp rõ ràng, có tổ chức và có thể mở rộng để quản lý trạng thái và trình bày trực quan trong ứng dụng React Native của bạn.
Lợi ích của việc sử dụng các thành phần chứa và trình bày
Các thành phần chứa và trình bày có thể cung cấp một số lợi ích. Chúng có thể giúp cải thiện cấu trúc mã, khả năng bảo trì và khả năng mở rộng của bạn. Chúng cũng dẫn đến sự hợp tác tốt hơn và phân công nhiệm vụ giữa các nhóm. Chúng thậm chí có thể giúp tăng hiệu suất và tối ưu hóa ứng dụng React Native của bạn.
Thực hiện theo các phương pháp hay nhất để triển khai các thành phần này và bạn có thể xây dựng các ứng dụng React Native tốt hơn và có khả năng mở rộng hơn.