Tách logic và giao diện người dùng giúp viết và kiểm tra các thành phần dễ dàng hơn.
Mục tiêu chính của bài viết này là đảm bảo rằng chúng ta đang viết các thành phần mới của mình theo cách mà mỗi thành phần chỉ quan tâm đến dữ liệu, xử lý lỗi, tải và bất kỳ logic cần thiết nào khác của nó (chúng ta sẽ thảo luận về việc chia sẻ dữ liệu giữa các thành phần trong một bài viết khác ).
Sao nó lại quan trọng?
- Khả năng mở rộng: Nó thực sự có khả năng mở rộng cao.
- Khả năng loại bỏ: Việc xóa một thành phần sẽ không còn là vấn đề sau ngày hôm nay, không có thay đổi vi phạm hoặc hồi quy nào xảy ra.
- Khả năng di chuyển: Khả năng sử dụng thành phần ở mọi nơi và có thể trên các dự án sử dụng cùng một API.
Thực hành
Hãy đi sâu vào mã và hiển thị 2 ví dụ trước và sau khi tái cấu trúc.
Hãy xem ví dụ sau và cố gắng hiểu cách thực hiện:
import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
Như bạn có thể thấy ở trên, chúng tôi có một ví dụ đơn giản về triển khai danh sách Việc cần làm bằng cách yêu cầu dữ liệu thông qua cấu hình API từ xa bằng cách sử dụng axios.
Bạn có thể nhận thấy phép tính đơn giản để trích xuất các mục có trạng thái = TODO không? Nếu câu trả lời của bạn là có, thì chúng ta đang ở trên cùng một trang.
Như chúng tôi đã giải thích ở đầu bài viết, nhiệm vụ của chúng tôi là tách logic khỏi giao diện người dùng, nhưng trong ví dụ trên, chúng tôi có logic trong cùng một tệp JS, hãy xem những gì nên làm để đạt được nhiệm vụ của chúng tôi.
Vì vậy, trước hết, chúng ta cần loại bỏ logic ra khỏi thành phần.
import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;
Như bạn có thể thấy, chúng tôi gọi nó là “useTodoList”. Móc này phải chứa logic của thành phần TodoList.
Bạn có thể nhận thấy rằng chúng tôi không có giao diện người dùng trong tệp, đây là một móc tùy chỉnh.
Nhưng thành phần chính “TodoList” trông như thế nào?
import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
Đơn giản nhỉ? Đây chính là lý do tại sao điều quan trọng là xây dựng các thành phần trong đó logic nghiệp vụ không phải là một phần của giao diện người dùng và xử lý hook tùy chỉnh dưới dạng API cho thành phần của bạn.
Còn giao tiếp giữa các thành phần khi mỗi thành phần hoạt động ở chế độ độc lập thì sao? Đây sẽ là chủ đề thú vị mà chúng tôi sẽ đề cập trong bài viết tiếp theo.
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- PlatoAiStream. Thông minh dữ liệu Web3. Kiến thức khuếch đại. Truy cập Tại đây.
- Đúc kết tương lai với Adryenn Ashley. Truy cập Tại đây.
- Mua và bán cổ phần trong các công ty PRE-IPO với PREIPO®. Truy cập Tại đây.
- nguồn: https://www.codementor.io/esmatnawahda/how-to-separate-logic-from-ui-with-react-components-by-esmat-ibrahim-javascript-in-plain-english-25c8b0j0uf
