Giao diện người dùng máy trạng thái: Xây dựng giao diện xác định, không có lỗi
Tìm hiểu cách máy trạng thái trực quan loại bỏ các trạng thái giao diện người dùng không thể thực hiện được, đơn giản hóa các thành phần tương tác phức tạp và tạo giao diện xác định, không có lỗi trong React.
Điểm chính
Máy trạng thái giao diện người dùng là một mô hình toán học mô tả tất cả các trạng thái hợp lệ mà một thành phần giao diện có thể chiếm giữ và sự chuyển đổi rõ ràng giữa các trạng thái đó được kích hoạt bởi các sự kiện của người dùng hoặc điều kiện hệ thống. Máy trạng thái loại bỏ toàn bộ danh mục lỗi giao diện người dùng bằng cách tạo ra "trạng thái không thể không thể" — vòng quay tải và dấu kiểm thành công của bạn không thể xuất hiện đồng thời nếu máy trạng thái của bạn cấm kết hợp đó.
Trạng thái vấn đề Máy giải quyết
Hầu hết các lỗi giao diện người dùng đều bắt nguồn từ các thành phần có thể rơi vào trạng thái không thể chấp nhận được về mặt logic. Một ví dụ cổ điển: nút gửi biểu mẫu không có mô hình trạng thái rõ ràng có thể đồng thời ở trạng thái "đang tải" và trạng thái "bị vô hiệu hóa" từ hai cờ boolean riêng biệt. Máy trạng thái ngăn chặn điều này bằng cách yêu cầu thành phần đó luôn ở đúng một trạng thái được xác định rõ ràng tại bất kỳ thời điểm nào.
- "Địa ngục cờ Boolean" — isLoading, isDisabled, isError, isSuccess tất cả đều xung đột
- Điều kiện cuộc đua trong đó người dùng nhanh kích hoạt nhiều trạng thái cùng một lúc
- Lỗi chuyển tiếp trong đó hoạt ảnh bắt đầu từ vị trí trung gian không chính xác
- Tải nhận thức của nhà phát triển từ việc theo dõi các tổ hợp cờ n × n trong quá trình xem xét mã
Khái niệm máy trạng thái cốt lõi
Máy trạng thái bao gồm một tập hợp hữu hạn các trạng thái, từ vựng về các sự kiện có thể kích hoạt chuyển đổi và các điều kiện bảo vệ xác định xem chuyển đổi có được phép hay không.
tiểu bang
Mỗi trạng thái đại diện cho một điều kiện cụ thể của thành phần. Ví dụ về thành phần tìm nạp dữ liệu: không hoạt động, đang tải, thành công, lỗi, làm mới.
Sự kiện/Chuyển tiếp
Sự kiện kích hoạt thay đổi trạng thái. "SUBMIT" chuyển biểu mẫu từ trạng thái không hoạt động sang trạng thái đang tải. "THÀNH CÔNG" chuyển từ tải sang thành công. "ERROR" chuyển từ tải sang lỗi.
Vệ binh
Các điều kiện phải đúng để chuyển sang trạng thái cháy. Sự kiện "SUBMIT" chỉ có thể kích hoạt quá trình chuyển đổi không hoạt động → tải nếu trình bảo vệ xác thực biểu mẫu vượt qua.
Bối cảnh/Trạng thái mở rộng
Dữ liệu phụ trợ mà máy mang theo (giá trị đầu vào của người dùng, thông báo lỗi, dữ liệu được tải) cùng với tên trạng thái hiện tại.
Máy trạng thái trong ExodeUI
ExodeUI cung cấp trình chỉnh sửa máy trạng thái biểu đồ nút trực quan. Bạn vẽ các trạng thái dưới dạng vòng tròn, kết nối chúng bằng các mũi tên được gắn nhãn biểu thị các sự kiện và đính kèm hoạt ảnh lò xo cũng như các thay đổi thuộc tính trực quan cho từng trạng thái. Máy được lưu trong tệp .exode: trong React bạn tải nó bằng ExodeUICanvas và điều khiển nó qua các đầu vào và trong Swift thông qua ExodeUIController.
Đoạn mã triển khai thực tế
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}