Lưu trữ #React - Phá Kén

Giới thiệu về các mẫu React Design Patterns Khi các ứng dụng React phát triển về quy mô và độ phức tạp, việc duy trì mã sạch, hiệu quả và có thể mở rộng trở thành một thách thức. Các mẫu thiết […]

Tagged #React, #ReactNative

Giới thiệu về các mẫu React Design Patterns

Khi các ứng dụng React phát triển về quy mô và độ phức tạp, việc duy trì mã sạch, hiệu quả và có thể mở rộng trở thành một thách thức. Các mẫu thiết kế React cung cấp các giải pháp đã được chứng minh cho các vấn đề phát triển phổ biến, cho phép các nhà phát triển xây dựng các ứng dụng dễ quản lý và mở rộng hơn. Các mẫu này thúc đẩy tính mô-đun, tái sử dụng mã và tuân thủ các phương pháp hay nhất, khiến chúng trở thành công cụ thiết yếu cho bất kỳ nhà phát triển React nào.

Trong hướng dẫn này, chúng ta sẽ khám phá các mẫu thiết kế React chính, chẳng hạn như Container và Presentation Components , Custom Hooks và Memoization Patterns , với các ví dụ thực tế để chứng minh lợi ích của chúng. Cho dù bạn là người mới bắt đầu hay nhà phát triển có kinh nghiệm, bài viết này sẽ giúp bạn hiểu cách sử dụng các mẫu này để cải thiện quy trình làm việc của mình và tạo ra các ứng dụng React tốt hơn.

Container and Presentation Components

Mẫu Container and Presentation Components là một phương pháp thiết kế được sử dụng rộng rãi trong React, tách logic ứng dụng khỏi việc render UI. Sự tách biệt này giúp tạo ra các thành phần có thể mô-đun hóa, tái sử dụng và kiểm thử được, phù hợp với nguyên tắc tách biệt các mối quan tâm .

Thành phần Container: Xử lý logic nghiệp vụ, quản lý trạng thái và tìm nạp dữ liệu. Chúng tập trung vào cách mọi thứ hoạt động.
Thành phần trình bày: Xử lý việc hiển thị dữ liệu và UI. Chúng tập trung vào cách mọi thứ trông như thế nào.

Sự phân chia này giúp cơ sở mã của bạn dễ bảo trì hơn, vì những thay đổi về logic hoặc UI có thể được xử lý độc lập mà không ảnh hưởng lẫn nhau.

Benefits of the Pattern

Khả năng tái sử dụng mã: Các thành phần trình bày có thể được tái sử dụng ở nhiều phần khác nhau của ứng dụng.
Khả năng kiểm tra được cải thiện: Logic kiểm tra trở nên dễ dàng hơn vì nó được tách biệt trong các thành phần chứa.
Bảo trì đơn giản: Những thay đổi về logic hoặc UI có thể được xử lý độc lập, giúp giảm nguy cơ làm hỏng các phần khác của mã.

Ví dụ: Fetching and Displaying User Data

Sau đây là cách triển khai mô hình Container và Presentation Components:

Component Container

import React, { useState, useEffect } from "react"; import UserList from "./UserList"; const UserContainer = () => { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch("/api/users") .then((response) => response.json()) .then((data) => { setUsers(data); setLoading(false); }) .catch(() => setLoading(false)); }, []); return <UserList users={users} loading={loading} />; }; export default UserContainer;

Presentation Component

import React from "react"; const UserList = ({ users, loading }) => { if (loading) return <p>Loading...</p>; return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; export default UserList;

Trong ví dụ này:

UserContainerlấy dữ liệu người dùng và truyền nó cùng với trạng thái tải dưới dạng props tới UserList.
UserListchỉ tập trung vào việc hiển thị dữ liệu người dùng.

Mẫu này tăng cường tính rõ ràng, giảm trùng lặp mã và đơn giản hóa việc thử nghiệm. Nó đặc biệt hữu ích cho các ứng dụng mà việc truy xuất dữ liệu và hiển thị UI thường xuyên và phức tạp.

Custom Hooks for Composition

Custom Hooks cho phép bạn đóng gói logic có thể tái sử dụng, giúp mã React của bạn sạch hơn và có tính mô-đun hơn. Thay vì sao chép logic trên nhiều thành phần, bạn có thể trích xuất nó thành một hook và sử dụng nó ở bất cứ đâu khi cần. Điều này cải thiện khả năng tái sử dụng và khả năng kiểm tra mã trong khi vẫn tuân thủ nguyên tắc DRY (Đừng lặp lại chính mình) .

Ví dụ: Lấy dữ liệu Hook

Móc tùy chỉnh

import { useState, useEffect } from "react"; const useFetchData = (url) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(url) .then((res) => res.json()) .then((result) => { setData(result); setLoading(false); }); }, [url]); return { data, loading }; }; export default useFetchData;

Sử dụng Hook

import React from "react"; import useFetchData from "./useFetchData"; const Posts = () => { const { data: posts, loading } = useFetchData("/api/posts"); if (loading) return <p>Loading...</p>; return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }; export default Posts;

Trong ví dụ này, useFetchDatahook đóng gói logic truy xuất dữ liệu, cho phép bất kỳ thành phần nào truy xuất dữ liệu với ít boilerplate nhất. Hook tùy chỉnh rất có giá trị trong việc đơn giản hóa mã và đảm bảo kiến trúc sạch.

Quản lý trạng thái với Reducers

Khi quản lý các trạng thái phức tạp hoặc nhóm lại, Reducer Pattern cung cấp một cách có cấu trúc để xử lý các chuyển đổi trạng thái. Nó tập trung logic trạng thái vào một hàm duy nhất, giúp cập nhật trạng thái có thể dự đoán được và dễ gỡ lỗi hơn. useReducerHook của React là lý tưởng để triển khai mẫu này.

Lợi ích của Reducers

Khả năng dự đoán: Các thay đổi trạng thái được xác định rõ ràng thông qua các hành động.
Khả năng mở rộng: Phù hợp với việc quản lý trạng thái phức tạp với nhiều phụ thuộc.
Khả năng bảo trì: Logic tập trung giúp đơn giản hóa việc gỡ lỗi và thử nghiệm.

Ví dụ: Managing Authentication State

Reducer Function

const initialState = { isAuthenticated: false, user: null }; function authReducer(state, action) { switch (action.type) { case "LOGIN": return { ...state, isAuthenticated: true, user: action.payload }; case "LOGOUT": return initialState; default: return state; } }

Thành phần sử dụnguseReducer

import React, { useReducer } from "react"; const AuthComponent = () => { const [state, dispatch] = useReducer(authReducer, initialState); const login = () => dispatch({ type: "LOGIN", payload: { name: "John Doe" } }); const logout = () => dispatch({ type: "LOGOUT" }); return ( <div> {state.isAuthenticated ? ( <> <p>Welcome, {state.user.name}</p> <button onClick={logout}>Logout</button> </> ) : ( <button onClick={login}>Login</button> )} </div> ); }; export default AuthComponent;

Trong ví dụ này:

Xác authReducerđịnh trạng thái thay đổi như thế nào dựa trên hành động.
Công AuthComponentdụng useReducerđể quản lý trạng thái xác thực.

Bộ giảm đặc biệt hiệu quả trong việc xử lý logic trạng thái phức tạp trong các ứng dụng có khả năng mở rộng, thúc đẩy tính rõ ràng và tính nhất quán trong quản lý trạng thái.

Provider Pattern for Context API

Provider Pattern tận dụng Context API của React để chia sẻ trạng thái hoặc chức năng giữa các thành phần mà không cần prop drilling. Nó bao bọc các thành phần trong một context provider, cho phép các thành phần lồng nhau sâu truy cập dữ liệu được chia sẻ.

Những lợi ích

Tránh khoan chân vịt: Đơn giản hóa việc truyền dữ liệu qua các thành phần lồng nhau sâu.
Quản lý trạng thái tập trung: Dễ dàng quản lý các trạng thái toàn cầu như chủ đề hoặc xác thực.

Ví dụ: Theme Context

import React, { createContext, useState, useContext } from "react"; const ThemeContext = createContext(); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState("light"); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); }; const useTheme = () => useContext(ThemeContext); export { ThemeProvider, useTheme };

Using the Context

import React from "react"; import { ThemeProvider, useTheme } from "./ThemeContext"; const ThemeToggle = () => { const { theme, setTheme } = useTheme(); return ( <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}> Switch to {theme === "light" ? "dark" : "light"} mode </button> ); }; const App = () => ( <ThemeProvider> <ThemeToggle /> </ThemeProvider> ); export default App;

Higher-Order Components (HOC)

Higher-Order Components (HOC) là các hàm lấy một component và trả về một component mới có thêm chức năng. Chúng cho phép bạn tái sử dụng logic trên nhiều component mà không cần sửa đổi cấu trúc của chúng.

Những lợi ích

Khả năng tái sử dụng mã: Chia sẻ logic như xác thực hoặc chủ đề trên các thành phần.
Đóng gói: Giữ logic nâng cao tách biệt với thành phần gốc.

Ví dụ: Authentication HOC

const withAuth = (Component) => (props) => { const isAuthenticated = true; // Replace with actual auth logic return isAuthenticated ? <Component {...props} /> : <p>Please log in</p>; }; const Dashboard = () => <div>Welcome to the dashboard</div>; export default withAuth(Dashboard);

Compound Components

Mẫu Compound Components cho phép bạn xây dựng một thành phần cha với nhiều thành phần con hoạt động cùng nhau một cách gắn kết. Mẫu này lý tưởng để tạo các thành phần UI linh hoạt và có thể tái sử dụng.

Những lợi ích

Khả năng tùy chỉnh: Các thành phần con có thể được kết hợp theo nhiều cách khác nhau.
Tính rõ ràng: Xác định rõ ràng mối quan hệ giữa các thành phần cha và con.

Ví dụ: Components Tab

import React, { useState, createContext, useContext } from "react"; const TabsContext = createContext(); const Tabs = ({ children }) => { const [activeTab, setActiveTab] = useState(0); return ( <TabsContext.Provider value={{ activeTab, setActiveTab }}> {children} </TabsContext.Provider> ); }; Tabs.Tab = ({ index, label }) => { const { activeTab, setActiveTab } = useContext(TabsContext); return ( <button style={{ fontWeight: activeTab === index ? "bold" : "normal" }} onClick={() => setActiveTab(index)} > {label} </button> ); }; Tabs.Panel = ({ index, children }) => { const { activeTab } = useContext(TabsContext); return activeTab === index ? <div>{children}</div> : null; }; // Usage const App = () => ( <Tabs> <Tabs.Tab index={0} label="Tab 1" /> <Tabs.Tab index={1} label="Tab 2" /> <Tabs.Panel index={0}>Content for Tab 1</Tabs.Panel> <Tabs.Panel index={1}>Content for Tab 2</Tabs.Panel> </Tabs> ); export default App;

Memoization

Ghi nhớ là một kỹ thuật tối ưu hóa hiệu suất để ngăn chặn việc kết xuất lại các thành phần hoặc tính toán lại các giá trị không cần thiết trong React.

Techniques

React.memo: Ngăn chặn việc hiển thị lại các thành phần chức năng trừ khi thuộc tính của chúng thay đổi.

 const ExpensiveComponent = React.memo(({ value }) => { console.log("Rendered"); return <p>{value}</p>; }); export default ExpensiveComponent;

useMemo: Ghi nhớ kết quả tính toán, chỉ tính toán lại khi sự phụ thuộc thay đổi.

 const ExpensiveCalculation = ({ number }) => { const calculatedValue = React.useMemo(() => number * 2, [number]); return <p>{calculatedValue}</p>; }; export default ExpensiveCalculation;

useCallback: Ghi nhớ các hàm, hữu ích khi truyền lệnh gọi lại cho các thành phần con.

 const Parent = () => { const handleClick = React.useCallback(() => console.log("Clicked!"), []); return <Child onClick={handleClick} />; }; const Child = React.memo(({ onClick }) => <button onClick={onClick}>Click</button>);

Ghi nhớ cải thiện hiệu suất trong các tình huống liên quan đến tập dữ liệu lớn hoặc cập nhật giao diện người dùng phức tạp, đảm bảo ứng dụng React luôn phản hồi nhanh.

Phần kết luận

Nắm vững các mẫu thiết kế React là chìa khóa để xây dựng các ứng dụng có khả năng mở rộng, bảo trì và hiệu quả. Bằng cách áp dụng các mẫu như Container và Presentation Components , Custom Hooks và Memoization , bạn có thể hợp lý hóa quá trình phát triển, cải thiện khả năng tái sử dụng mã và nâng cao hiệu suất. Các mẫu nâng cao như Higher-Order Components , Compound Components và Provider Pattern đơn giản hóa hơn nữa việc quản lý trạng thái phức tạp và tương tác thành phần.

Các mẫu này không chỉ mang tính lý thuyết—chúng giải quyết các thách thức thực tế trong quá trình phát triển React, giúp bạn viết mã sạch và có tính mô-đun. Bắt đầu kết hợp các mẫu này vào các dự án của bạn để tạo ra các ứng dụng mạnh mẽ, dễ mở rộng quy mô và có thể bảo trì lâu dài. Với các mẫu thiết kế React trong bộ công cụ của bạn, bạn sẽ được trang bị tốt hơn để giải quyết bất kỳ dự án nào, bất kể phức tạp đến đâu.
Để biết thêm thông tin chi tiết, hãy xem tài liệu về Mẫu thiết kế React trên Patterns.dev .

Hiểu về optimistic UI và React useOptimistic Hook

Lập Trình

Lập Trình Mobile

React Native

17 min
2 năm ago
2

Tagged #React, #ReactNative

Milliseconds có thể tạo nên hoặc phá hỏng trải nghiệm người dùng, vì sự chậm trễ có thể khiến họ rời khỏi trang web của chúng ta. Một chiến lược đang được chú ý nhờ khả năng mang lại các tương tác nhanh chóng và nhạy bén là mẫu giao diện lạc quan (Optimistic UI pattern). Mẫu này cho phép chúng ta cập nhật giao diện người dùng ngay lập tức sau khi người dùng hoàn thành một hành động, dựa trên giả định rằng các hoạt động nền sẽ thành công. Phương pháp này làm tăng cảm giác về tốc độ của ứng dụng và cải thiện đáng kể trải nghiệm người dùng bằng cách cung cấp phản hồi ngay tức thì.

Hiểu về Optimistic UI và Hook useOptimistic của React
Trong bài viết này, chúng ta sẽ khám phá Hook mới của React là useOptimistic và cách nó có thể giúp chúng ta triển khai các cập nhật giao diện lạc quan để làm cho ứng dụng của chúng ta cảm giác nhanh hơn và nhạy bén hơn.

React useOptimistic Hook là gì?
Hook useOptimistic là một tính năng mạnh mẽ hiện có sẵn trong phiên bản Canary của React. Nó cho phép chúng ta hiển thị một trạng thái khác trong khi một hành động bất đồng bộ, chẳng hạn như yêu cầu mạng, đang diễn ra. Điều này đặc biệt quan trọng trong những trường hợp người dùng mong đợi phản hồi tức thì cho các hành động của họ, chẳng hạn như khi gửi biểu mẫu hoặc bình luận trên mạng xã hội.

Bằng cách triển khai Hook useOptimistic, các ứng dụng có thể cập nhật giao diện người dùng ngay lập tức, mang lại trải nghiệm người dùng liền mạch và hấp dẫn. Hãy cùng tìm hiểu với một ví dụ:

const [optimisticComments, postComment] = useOptimistic(commentsFromServer, addComment);

optimisticComments: Đây là trạng thái Optimistic, được khởi tạo với giá trị từ commentsFromServer. Nó hiển thị danh sách các bình luận hiện có trên một bài đăng, phản ánh ngay lập tức mọi hành động của người dùng.
postComment: Đây là hàm dispatch mà chúng ta gọi để áp dụng mutation được định nghĩa trong addComment. Hàm này cập nhật optimisticComments một cách Optimistic khi người dùng thêm một bình luận.
commentsFromServer: Đây là nguồn dữ liệu chính, đại diện cho danh sách các bình luận đã được xác nhận lấy từ server. Nếu giá trị này thay đổi (ví dụ, sau khi lấy dữ liệu mới từ server), optimisticComments cũng sẽ cập nhật để đảm bảo tính nhất quán.
addComment: Đây là logic mutation sẽ được áp dụng cho optimisticComments khi postComment được gọi. Nó xác định cách thêm một bình luận mới vào danh sách một cách Optimistic.

Xét về hiệu quả của nhà phát triển, React đã giới thiệu Hook useOptimistic được tùy chỉnh cho mẫu giao diện này. Việc cập nhật giao diện lạc quan đảm bảo rằng người dùng không phải chờ đợi phản hồi từ server, điều này là rất quan trọng để duy trì trải nghiệm người dùng mượt mà. Khi người dùng thực hiện một hành động, useOptimistic phản ánh ngay lập tức các thay đổi trạng thái trước khi server phản hồi.

Hook này quản lý trạng Optimistic bằng cách ban đầu giả định rằng API sẽ phản hồi thành công. Nếu API phản hồi thành công, trạng thái giả định sẽ được duy trì. Trong trường hợp API thất bại, trạng thái sẽ trở lại trạng thái ban đầu. Sự cân bằng này là rất quan trọng để duy trì tính toàn vẹn của dữ liệu trong khi cung cấp trải nghiệm người dùng nhanh chóng và nhạy bén.

Bằng cách sử dụng Hook useOptimistic, các nhà phát triển có thể tạo ra những ứng dụng cảm giác tức thì và hấp dẫn hơn, giữ cho người dùng luôn tham gia và hài lòng với hiệu suất.

Một ví dụ đơn giản: Bình luận trên một bài đăng
Hãy tưởng tượng một nền tảng mạng xã hội nơi người dùng có thể xem các bài đăng của người khác. Khi người dùng nhấn nút Gửi, ứng dụng sẽ đợi phản hồi từ server trước khi cập nhật giao diện người dùng. Sự chậm trễ này có thể làm cho ứng dụng cảm giác chậm chạp.

Giả sử chúng ta đã có một server được thiết lập với các tệp cần thiết, hãy tiến hành triển khai chức năng Optimistic:

import { useState } from 'react';
import { useOptimistic } from 'react';
function CommentButton({ postId }) {
const [comments, setComments] = useOptimistic([]);
const [newComment, setNewComment] = useState('');
const [error, setError] = useState('');
const handleCommentSubmit = async () => {
setError(''); // Xóa mọi lỗi trước đó
const optimisticNewComment = { id: Date.now(), text: newComment, status: 'sending' };
setComments([...comments, optimisticNewComment]);  // Cập nhật danh sách bình luận một cách Optimistic
try {
const response = await api.postComment(postId, newComment);
const updatedComments = comments.map(comment =>
comment.id === optimisticNewComment.id ? { ...comment, status: 'sent' } : comment
);
setComments(updatedComments); // Cập nhật trạng thái bình luận thành 'sent'
} catch (error) {
const filteredComments = comments.filter(comment => comment.id !== optimisticNewComment.id);
setComments(filteredComments);
setError('Không thể đăng bình luận. Vui lòng thử lại.');
}
};
return (
<div>
<input 
type="text"
value={newComment}
onChange={(e) => setNewComment(e.target.value)}
placeholder="Viết bình luận..."
/>
<button onClick={handleCommentSubmit} disabled={!newComment.trim()}>
Đăng bình luận
</button>
{comments.map(comment => (
<div key={comment.id}>
{comment.text} {comment.status === 'sending' && <span>(Đang gửi...)</span>}
</div>
))}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default CommentButton;

Trong đoạn mã này, chúng ta đang khởi tạo Optimistic. Biến trạng thái optimisticComments chứa danh sách các bình luận, bao gồm mọi cập nhật Optimistic (các bình luận xuất hiện ngay lập tức khi người dùng thêm chúng, trước khi được xác nhận từ server). Nó bắt đầu dưới dạng một mảng trống [].

postComment là một hàm mà chúng ta sử dụng để cập nhật optimisticComments một cách Optimistic. Nó nhận một bình luận mới và thêm nó vào danh sách các bình luận hiện có. Hàm mutation (comments, newComment) => [...comments, newComment] xác định cách cập nhật danh sách bình luận khi thêm một bình luận mới. Nó tạo ra một mảng mới chứa tất cả các bình luận hiện có và bình luận mới.

Để gửi một bình luận một cách Optimistic, trước tiên chúng ta sẽ tạo một bình luận Optimistic. optimisticNewComment là một đối tượng bình luận mới với một ID tạm thời, văn bản từ trường nhập liệu, và trạng thái là sending. Đối tượng này đại diện cho bình luận mà người dùng vừa thêm.

Sau đó, để đạt được cập nhật Optimistic, chúng ta sẽ sử dụng postComment(optimisticNewComment), hành động này sẽ cập nhật danh sách optimisticComments để bao gồm bình luận mới ngay lập tức. Điều này mang lại cho người dùng phản hồi tức thì rằng bình luận của họ đã được thêm.

Sau đó, khối try sẽ cố gắng gửi bình luận mới đến server bằng cách sử dụng api.postComment(postId, newComment). Nếu server xác nhận bình luận đã được thêm, trạng thái của optimisticNewComment sẽ được cập nhật thành sent. Danh sách bình luận sẽ được cập nhật để phản ánh trạng thái mới này. Nếu cuộc gọi đến server thất bại, khối catch sẽ xóa bình luận Optimistic khỏi optimisticComments và đặt một thông báo lỗi để thông báo cho người dùng rằng bình luận không thể được đăng.

Khi chúng ta chạy ứng dụng và nhấn nút Đăng bình luận, nó sẽ trông như thế này:

Lưu ý cách nó hiển thị “Đang gửi” cùng với bình luận — đó chính là điều mà Hook useOptimistic làm. Nó đăng bình luận trong khi vẫn đang chờ yêu cầu mạng hoàn tất.

Optimistic UI vs. Các phương pháp truyền thống
Bằng cách triển khai mẫu giao diện Optimistic, các ứng dụng có thể giả lập phản hồi tức thì bằng cách cập nhật giao diện người dùng ngay khi người dùng tương tác, điều này đặc biệt quan trọng trong các môi trường tương tác liền mạch như mạng xã hội.

Các cập nhật giao diện truyền thống dựa vào thời gian phản hồi từ server, khiến người dùng phải chờ đợi lâu và làm cho ứng dụng cảm giác chậm chạp. Giao diện Optimistic biến đổi trải nghiệm này bằng cách cập nhật giao diện trước khi server phản hồi, hiển thị ngay kết quả mong đợi của hành động người dùng — như việc nhìn thấy một bình luận xuất hiện ngay khi nhấn.

ấn “Đăng bình luận”. Điều này làm cho ứng dụng cảm giác nhanh hơn nhiều.

Tóm lại, mẫu giao diện Optimistic giúp cải thiện trải nghiệm người dùng bằng cách giảm thiểu sự chậm trễ và mang lại cảm giác tức thì. Bằng cách sử dụng Hook useOptimistic của React, chúng ta có thể dễ dàng triển khai chiến lược này, mang lại trải nghiệm người dùng mượt mà hơn và tăng cường sự tương tác với người dùng.

Chúng ta đã đi qua các khái niệm và lợi ích của Optimistic UI và React Hook useOptimistic. Khi triển khai các kỹ thuật này, bạn có thể tạo ra các ứng dụng cảm giác nhanh hơn và nhạy bén hơn. Những ứng dụng này không chỉ cung cấp phản hồi tức thì cho người dùng mà còn giúp nâng cao trải nghiệm tổng thể của họ.

Hãy cân nhắc sử dụng useOptimistic trong dự án React tiếp theo của bạn để tận dụng mẫu giao diện Optimistic và mang lại trải nghiệm tốt nhất cho người dùng!

Phá Kén

Thẻ: #React

React Design Patterns: Các phương pháp hay nhất cho các ứng dụng có khả năng mở rộng

Hiểu về optimistic UI và React useOptimistic Hook