react-optimistic-ui-hook
Một cài đặt “giao diện UI lạc quan” tối thiểu không phụ thuộc vào React Hook.
“Giao diện UI Lạc quan” là gì?
Giao diện UI lạc quan không chờ đợi một hoạt động kết thúc để cập nhật đến trạng thái cuối cùng. Chúng ngay lập tức chuyển đổi sang trạng thái cuối cùng, hiển thị dữ liệu giả mạo trong thời gian hoạt động thực sự vẫn đang tiến hành. Read More Here
Lưu ý rằng bạn có thể tìm kiếm “giao diện UI lạc quan” và đọc thêm về mẫu này và cách nó hoạt động. Nó đơn giản làm cho ứng dụng của bạn trông nhanh hơn bằng cách mong đợi cuộc gọi thành công đến một thứ gì đó như một API trước khi nhận được phản hồi thực tế và cập nhật giao diện dựa trên kỳ vọng đó.
Cài đặt
Sử dụng NPM:
npm install react-optimistic-ui-hook
Sử dụng Yarn:
yarn add react-optimistic-ui-hook
Sử dụng
import React from 'react'
import { useOptimisticUI } from 'react-optimistic-ui-hook'
const USERNAME = 'mamal72'
const PREDICTED_AVATAR_URL = 'https://avatars0.githubusercontent.com/u/810438?v=4'
const DELAY_IN_MS = 2000
async function getGithubAvatarURL(username: string): Promise<string> {
const response = await fetch(`https://api.github.com/users/${username}`)
const data = await response.json()
return new Promise((resolve) => {
setTimeout(() => {
resolve(data.avatar_url)
}, DELAY_IN_MS);
})
}
export function GithubAvatar() {
const { status, result, error } = useOptimisticUI<string>(() => getGithubAvatarURL(USERNAME), PREDICTED_AVATAR_URL)
if (status === 'failed') {
// The "result" will be the predicted image url passed to the Hook,
// But "error" is set to the raised error in the passed promise
console.error("Failed to fetch image!", error)
}
if (status === 'loading') {
// The "result" will be the predicted image passed to the Hook again!
console.log('Loading image!')
}
if (status === 'succeed') {
// The "result" will be the resolved promise response here!
console.log("Resolved image!", result)
}
return (
<div>
<img src={result} alt="avatar" />
<p>Status: {status}</p>
</div>
)
}
Đóng góp
Bạn có thể báo cáo lỗi và vấn đề here.
Bạn cũng có thể gửi một PR nếu bạn cảm thấy bạn có thể cải thiện hoặc sửa một cái gì đó. Đừng quên viết/cập nhật các bài kiểm tra cho các thay đổi của bạn.
Chi tiết tải về:
Tác giả: mamal72
Nguồn: https://github.com/mamal72/react-optimistic-ui-hook
Giấy phép: MIT license