Làm cho các thành phần của bạn dễ đọc hơn với các mẹo này
Khi tôi viết code React, tôi có một mục tiêu đơn giản. Tôi muốn viết code dễ đọc, dễ hiểu và dễ cập nhật. Tôi muốn các đồng nghiệp trong tương lai có thể tiếp nhận công việc của tôi và mở rộng công việc đó.
Tôi không quan tâm nếu tôi thêm một vài câu lệnh if hay tôi sử dụng let thay vì const, hoặc nếu các hàm của tôi chứa nhiều câu lệnh trả về.
Những gì tôi đang tìm kiếm là các thành phần đơn giản, ngắn gọn, dễ hiểu.
Dưới đây là một số thủ thuật và mẹo để giúp các thành phần của bạn làm việc dễ dàng hơn.
Di chuyển tìm nạp dữ liệu để sử dụng các hook được hỗ trợ SWR
Tôi thích sử dụng useSWR cho tất cả các hook tìm nạp dữ liệu của mình. Hãy xem một ví dụ bên dưới tìm nạp hồ sơ của người dùng.
import useSWR from 'swr';
import { fetcher } from '../utils/fetcher';
import type { TUserProfile } from '../types';
export const useProfile = (id?: string) =>
useSWR<TUserProfile>(() => {
if (id) {
return `/api/users/${id}`;
}
return null;
}, fetcher);
Cái hook này trông đơn giản nhưng nó rất mạnh mẽ. Sự kỳ diệu của nó nằm ở chỗ nó có thể tìm nạp một cách có điều kiện. Nó chỉ tìm nạp hồ sơ người dùng khi thông số id được chuyển.
Chúng tôi đạt được điều này bằng cách sử dụng hàm key trong SWR và trả về null khi tham số ID không được xác định. Khi hàm này trả về null, trình tìm nạp không được gọi.
Điều này có nghĩa là chúng ta có thể viết các thành phần đơn giản sử dụng dữ liệu phải được tìm nạp liên tục và trừu tượng hóa tất cả sự phức tạp này.
Viết các thành phần đơn giản, dễ sử dụng
Bây giờ tôi đã xây dựng một thành phần tại tuyến đường pages/blog/[id].tsxsử dụng các hook tìm nạp dữ liệu đã đề cập trước đó.
Thành phần của chúng tôi yêu cầu hai lệnh gọi API - một lệnh gọi để tìm nạp bài đăng trên blog và lệnh gọi khác để tìm nạp hồ sơ của tác giả. Tuy nhiên, chúng tôi không thể tìm nạp hồ sơ của tác giả cho đến khi chúng tôi tìm nạp xong bài đăng trên blog, vì chúng tôi cần userID.
Với các móc tìm nạp dữ liệu của chúng tôi, điều này thật dễ dàng. Chúng tôi không cần viết useEffect có điều kiện mà chỉ tìm nạp hồ sơ dựa trên sự hiện diện của bài đăng trên blog. Thay vào đó, chúng tôi chỉ sử dụng cả hai hook của mình và chuyển vào userID (nếu bài đăng trên blog đã được tìm nạp) hoặc null.
import { useRouter } from 'next/router';
import { useProfile } from '../../hooks/useProfile';
import { useBlogPost } from '../../hooks/useBlogPost';
import { BlogPost } from '../../components/BlogPost';
import { BlogPostSkeleton } from '../../components/BlogPostSkeleton';
import { BlogPostFallback } from '../../components/BlogPostFallback';
export default function BlogPostPage() {
const { query } = useRouter();
const { data: blogPost, error: blogPostError } = useBlogPost(
query.id as string
);
const { data: userProfile, error: userProfileError } = useProfile(
blogPost?.userId
);
const error = blogPostError || userProfileError;
const loading = !blogPost || !userProfile;
if (error) return <BlogPostFallback />;
if (loading) return <BlogPostSkeleton />;
return <BlogPost blogPost={blogPost} userProfile={userProfile} />;
}
Chia các thành phần của bạn thành các phần hợp lý
Bạn sẽ nhận thấy rằng thành phần BlogPostPage của chúng tôi bao gồm nhiều thành phần. Có một thành phần Loading Skeleton, một thành phần Error Fallback và một thành phần trình bày mà chúng tôi chuyển dữ liệu đã tìm nạp của mình vào đó.
Sự tách biệt các mối quan tâm này làm cho thành phần của chúng ta và hành vi của nó dễ đọc và dễ hiểu.
Đòn bẩy TypeScript
Với TypeScript, chúng ta có thể tự tin hơn rằng code của chúng ta hoạt động nhờ vào việc kiểm tra kiểu thời gian biên dịch.
Nó cũng làm cho code của chúng tôi làm việc dễ dàng hơn, nhờ vào Intellisense và hoàn thành code. Các generic TypeScript hoạt động hiệu quả khi được kết hợp với useSWR, vì chúng cho phép chúng ta viết các hook tìm nạp dữ liệu được đánh máy mạnh mẽ.
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
Chi tiết khóa học: https://frontend.techmaster.vn/.
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận