React PropTypes so với Flow


100

PropTypes và Flow bao gồm những thứ tương tự nhưng đang sử dụng các cách tiếp cận khác nhau. PropTypes có thể cung cấp cho bạn cảnh báo trong thời gian chạy, điều này có thể hữu ích để nhanh chóng tìm thấy các phản hồi không đúng định dạng đến từ máy chủ, v.v. Tuy nhiên, Flow dường như là tương lai và với các khái niệm như generic là một giải pháp rất linh hoạt. Ngoài ra, tính năng tự động hoàn thành do Nuclide cung cấp cũng là một điểm cộng lớn cho Flow.

Câu hỏi của tôi bây giờ là cách tốt nhất để đi, khi bắt đầu một dự án mới. Hoặc nó có thể là một giải pháp tốt để sử dụng cả Flow và PropTypes? Vấn đề với việc sử dụng cả hai là bạn viết rất nhiều mã trùng lặp. Đây là một ví dụ về ứng dụng trình phát nhạc mà tôi đã viết:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Cả hai định nghĩa về cơ bản đều chứa thông tin giống nhau và khi kiểu dữ liệu được thay đổi, cả hai định nghĩa đều cần được cập nhật.

Tôi đã tìm thấy plugin babel này để chuyển đổi khai báo kiểu thành PropTypes, đây có thể là một giải pháp.


1
Nếu bạn muốn bắt đầu với Flow, hãy thử đăng bài này: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch

1
Theo kinh nghiệm, sử dụng plugin được đề cập trong câu hỏi không phải là một ý kiến ​​hay. Nó không hỗ trợ tất cả các loại thành phần, hoàn toàn bị hỏng với React Native kể từ v0.39 và nói chung là rất mỏng manh. Chủ sở hữu của repo đã từng phản hồi những vấn đề này khá nhanh chóng, nhưng có vẻ như anh ấy đã mất hứng thú và không còn có thể dựa vào để duy trì nó.
Tomty

Hãy thử tcomb thông qua plugin Babel để kiểm tra kiểu tĩnh và thời gian chạy bằng Flow và tcomb.
comerc

Câu trả lời:


81

Một năm sau khi đặt câu hỏi này, tôi muốn cập nhật về trải nghiệm của tôi với vấn đề này.

Khi Flow phát triển rất nhiều, tôi bắt đầu nhập cơ sở mã của mình với nó và không thêm bất kỳ định nghĩa PropType mới nào. Cho đến nay, tôi nghĩ rằng đây là một cách tốt để thực hiện, vì như đã đề cập ở trên, nó cho phép bạn không chỉ gõ đạo cụ mà còn các phần khác trong mã của bạn. Điều này thực sự hữu ích, chẳng hạn như khi bạn có một bản sao của các đạo cụ của bạn ở trạng thái, người dùng có thể sửa đổi. Ngoài ra, tự động hoàn thành trong IDE là một lợi ích tuyệt vời.

Bộ chuyển đổi tự động theo hướng này hoặc hướng khác đã không thực sự thành công. Vì vậy, đối với các dự án mới, bây giờ tôi thực sự khuyên bạn nên sử dụng Flow qua PropTypes (trong trường hợp bạn không muốn nhập hai lần).


IDE nào bạn sử dụng? Bão web?
sergey.tyan

3
Tôi đang sử dụng Atom với plugin Ide-flowtype.
danielbuechele

bạn vẫn cần propTypes khi sử dụng childContextTypes - stackoverflow.com/questions/42395113/…
gkd

3
nó không còn cần thiết để propTypes sử dụng khi xử lý tình huống đứa trẻ do API bối cảnh mới: reactjs.org/docs/context.html
SteveB

35

Ngoài cả hai đều thuộc lĩnh vực kiểm tra kiểu rất rộng, không có nhiều điểm tương đồng giữa hai loại.

Flow là một công cụ phân tích tĩnh sử dụng một tập hợp siêu ngôn ngữ, cho phép bạn thêm chú thích kiểu vào tất cả mã của mình và bắt toàn bộ lớp lỗi tại thời điểm biên dịch.

PropTypes là một trình kiểm tra kiểu cơ bản đã được vá trên React. Nó không thể kiểm tra bất cứ điều gì khác ngoài các loại đạo cụ được chuyển cho một thành phần nhất định.

Nếu bạn muốn đánh máy linh hoạt hơn cho toàn bộ dự án của mình thì Flow / TypeScript là những lựa chọn thích hợp. Miễn là bạn chỉ chuyển các kiểu chú thích vào các thành phần, bạn sẽ không cần PropTypes.

Nếu bạn chỉ muốn kiểm tra các loại hỗ trợ, thì đừng làm phức tạp phần còn lại của cơ sở mã của bạn và hãy chọn tùy chọn đơn giản hơn.


11
Vâng, chúng rất khác nhau về cách thức hoạt động. Tuy nhiên, tôi nghĩ mục đích sử dụng chúng rất giống nhau. Nhưng một điều bạn đã chỉ ra là một điểm tốt: Flow cho phép bạn bao gồm nhiều cơ sở mã của mình hơn, trong khi bạn bị giới hạn ở các đạo cụ khi sử dụng PropTypes.
danielbuechele

2
Mục đích sử dụng chỉ rất giống nhau nếu bạn chỉ sử dụng Flow để kiểm tra các loại prop. Một về cơ bản là một ngôn ngữ, còn lại là một thư viện.
Dan Prince

Hoàn toàn đồng ý với @DanPrince. Và tôi không nghĩ rằng đây là một ý tưởng hay để kiểm tra các phản hồi không đúng định dạng từ máy chủ với PropTypes. Sẽ tốt hơn nếu bạn kiểm tra thủ công điều này và giao diện người dùng của bạn phản hồi đúng cách (ví dụ: hiển thị thông báo cảnh báo) thay vì chỉ đưa cảnh báo vào bảng điều khiển.
Yan Takushevich

6
@YanTakushevich Bạn cần làm cả hai. Dù sao thì PropTypes cũng nên bị tắt trong quá trình sản xuất, vì vậy bạn luôn cần kiểm tra thủ công để đảm bảo rằng người dùng của bạn có trải nghiệm tốt. Tuy nhiên, PropTypes có thể rất hữu ích cho các cảnh báo thời gian chạy trong quá trình phát triển. Nó chỉ là một mạng lưới an toàn đẹp để đảm bảo bạn không quên bất cứ thứ gì.
ndbroadbent

27

Tôi tin rằng điểm bị bỏ sót ở đây là Flowtrình kiểm tra tĩnh trong khi PropTypestrình kiểm tra thời gian chạy , có nghĩa là

  • Luồng có thể chặn các lỗi ngược dòng trong khi mã hóa: về mặt lý thuyết, nó có thể bỏ sót một số lỗi mà bạn không biết (ví dụ: nếu bạn không triển khai đủ luồng trong dự án của mình hoặc trong trường hợp các đối tượng lồng nhau sâu)
  • PropTypes sẽ bắt chúng xuống dòng trong khi thử nghiệm, vì vậy nó sẽ không bao giờ bỏ lỡ

1
đây là một plugin babel chuyên dụng đã npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg

15

Hãy thử khai báo loại đạo cụ chỉ sử dụng Flow. Chỉ định một loại không chính xác, chẳng hạn như số thay vì chuỗi. Bạn sẽ thấy rằng điều này sẽ được gắn cờ trong mã sử dụng thành phần trong trình chỉnh sửa nhận biết Luồng của bạn. Tuy nhiên, điều này sẽ không khiến bất kỳ thử nghiệm nào bị lỗi và ứng dụng của bạn sẽ vẫn hoạt động.

Bây giờ thêm việc sử dụng React PropTypes với loại không chính xác. Điều này SẼ khiến các bài kiểm tra không thành công và bị gắn cờ trong bảng điều khiển của trình duyệt khi ứng dụng được chạy.

Dựa trên điều này, có vẻ như ngay cả khi Flow đang được sử dụng, thì PropTypes cũng nên được chỉ định.


Nó phụ thuộc vào cách các bài kiểm tra được thực hiện, nếu bạn sử dụng kiểm tra ảnh chụp nhanh của jest, các bài kiểm tra sẽ thất bại với các giá trị thuộc tính không hợp lệ.
Alexandre Borela

3
Ưu điểm của lỗi trong IDE của bạn là bạn sẽ thấy nó ngay lập tức trước khi bạn chạy thử nghiệm.
Tom Fenech

Cộng 1 cho phương pháp tiếp cận dây đai và dây treo.
David A. Gray
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.