Phản ứng Mobx - Thực tiễn tốt nhất

Trong bài viết này tôi muốn chỉ cho bạn các cách thực hành tốt nhất để sử dụng React với mobx. Tôi sẽ trình bày chúng như các quy tắc. Vì vậy, bất cứ khi nào bạn đi đến một vấn đề cụ thể, hãy cố gắng giải quyết nó trong khi tuân thủ các quy tắc này.

Bài viết này yêu cầu bạn có hiểu biết cơ bản về các cửa hàng trong mobx. Nếu không, hãy đọc nó trước.

Cần một sự khởi đầu nhanh chóng? Tôi đã tạo ra một dự án khởi động, thực hiện các thực tiễn được đề xuất. https://github.com/danielbischoff/react-mobx-starter

Các cửa hàng đại diện cho nhà nước ui

Luôn luôn nhớ rằng các cửa hàng đại diện cho trạng thái ứng dụng của bạn. Điều đó có nghĩa là, khi bạn lưu trạng thái cửa hàng của bạn vào một tệp, đóng chương trình của bạn và khởi chạy lại với trạng thái được tải, bạn sẽ có cùng một chương trình và sẽ thấy những điều tương tự, như bạn đã thấy trước khi đóng chương trình của mình. Các cửa hàng không có nghĩa là databases cơ sở dữ liệu địa phương. Họ cũng giữ thông tin về nút nào hiển thị, bị vô hiệu hóa, văn bản hiện tại của một đầu vào được nộp, v.v.

Tách các cuộc gọi còn lại của bạn khỏi các cửa hàng

Đừng gọi giao diện nghỉ ngơi của bạn từ trong cửa hàng của bạn. Điều này làm cho chúng khó kiểm tra. Thay vào đó, hãy đặt các cuộc gọi còn lại này vào các lớp bổ sung và chuyển các thể hiện này đến từng cửa hàng bằng cách sử dụng hàm tạo của cửa hàng. Khi bạn viết bài kiểm tra, bạn có thể dễ dàng giả mạo các cuộc gọi api này và chuyển ví dụ api giả của bạn đến từng cửa hàng.

Giữ logic kinh doanh của bạn trong các cửa hàng

Don lồng bao giờ viết logic kinh doanh trong các thành phần của bạn. Khi bạn viết logic kinh doanh của mình trong các thành phần, bạn không có cơ hội sử dụng lại nó, logic kinh doanh của bạn được trải rộng trên nhiều thành phần, điều này khiến cho việc tái cấu trúc hoặc sử dụng lại mã trở nên khó khăn. Viết logic nghiệp vụ với các phương thức trong các cửa hàng và gọi các phương thức này từ các thành phần của bạn.

Don Patrick tạo các trường hợp cửa hàng toàn cầu

Don mệnh bao giờ tạo ra các trường hợp cửa hàng toàn cầu. Bạn không thể viết bất kỳ bài kiểm tra hợp lý và đáng tin cậy cho các thành phần của bạn. Thay vào đó, hãy sử dụng Nhà cung cấp để đưa các cửa hàng của bạn vào đạo cụ linh kiện. Sau đó, trong các thử nghiệm của bạn, bạn có thể dễ dàng chế giễu các cửa hàng này.

Chỉ có cửa hàng được phép thay đổi thuộc tính của nó

Không bao giờ thay đổi thuộc tính lưu trữ trực tiếp trong một thành phần. Chỉ các cửa hàng được phép thay đổi thuộc tính của riêng mình. Luôn gọi một phương thức từ cửa hàng, thay đổi thuộc tính của cửa hàng. Nếu không, trạng thái ứng dụng của bạn (cửa hàng = trạng thái ứng dụng) được cập nhật từ mọi nơi và bạn đang dần mất kiểm soát. Điều đó làm cho nó rất khó để gỡ lỗi.

Luôn chú thích từng thành phần với @ observer

Việc chú thích từng thành phần với @ observer cho phép mỗi thành phần cập nhật về thay đổi chống đỡ của cửa hàng. Mặt khác, thành phần cha mẹ được chú thích với thành phần @ cần phải đăng ký lại, để cập nhật thành phần con của nó. Vì vậy, ít thành phần cần phải được đăng ký lại.

Sử dụng @ tính toán

Hãy nói rằng bạn muốn nút của bạn bị vô hiệu hóa khi người dùng không có vai trò quản trị viên và ứng dụng không ở chế độ quản trị viên ở chế độ trực tuyến. Một thuộc tính duy nhất như isAdmin trong một cửa hàng là không đủ cho việc này. Bạn sẽ cần một tài sản tính toán trong cửa hàng của bạn.

Có lẽ bạn không cần bộ định tuyến phản ứng

Có lẽ bạn không cần bộ định tuyến phản ứng. Như tôi đã nói trước khi bạn muốn các cửa hàng của bạn đại diện cho trạng thái ứng dụng của bạn. Khi bạn để bộ định tuyến phản ứng xử lý một phần trạng thái ứng dụng của mình, bạn không cho phép các cửa hàng của bạn đại diện cho trạng thái ứng dụng. Vì vậy, hãy giữ chế độ xem hiển thị hiện tại của bạn trong một tài sản tại một trong các cửa hàng của bạn. Sau đó, bạn có một thành phần chỉ hiển thị những gì tài sản nói.

Cố gắng ưu tiên các thành phần được kiểm soát hơn các thành phần không được kiểm soát

Luôn cố gắng xây dựng các thành phần được kiểm soát. Điều này làm cho các thành phần thử nghiệm và độ phức tạp tổng thể của các thành phần của bạn dễ dàng xử lý.

Tôi hy vọng tôi có thể giúp bạn với những lời khuyên đơn giản.
Đặt câu hỏi hoặc đưa ra phản hồi trong các ý kiến ​​dưới đây.