static propTypes Vs React.PropTypes

Question

Vui lòng không đóng câu hỏi này trước khi đọc hoàn toàn. Điều này nghe có vẻ giống như một câu hỏi có thể được trả lời chủ yếu bởi ý kiến ​​của một người. Nhưng tại sao có hai triển khai PropTypes? Cái nào được ưa thích?

Một cách là sử dụng từ khóa tĩnh và xác định propTypes của chúng tôi.

class App extends React.Component { 
    static propTypes = { 
    ... 
    } 
} 

Một cách khác là để làm một cái gì đó như thế này:

class App extends React.Component { 
    ... 
} 

App.propTypes = { 
    ... 
} 

Chúng ta có thể loại bỏ các propTypes nếu chúng ta đang sử dụng static từ khóa tại thời điểm xây dựng ứng dụng cho sản xuất? Vì việc xóa propTypes được khuyến khích để đạt được hiệu suất.

Answer 1

Tôi nghĩ rằng bởi vì phiên bản đầu tiên

class App extends React.Component { 
    static propTypes = { 
    ... 
} 
} 

không phải là ES6 hợp lệ của nó. Bạn không thể có một biến tĩnh được gán bên trong khai báo lớp. Nếu bạn muốn sử dụng phiên bản đó, bạn sẽ cần phải đặt trình thu thập thông tin của bạn để bao gồm ES7. Ít nhất thats đoán của tôi cho các thiết lập tôi có tại nơi làm việc vs các thiết lập tôi đang sử dụng ngay bây giờ.

Answer 2

Đây là phiên bản ES7

class App extends React.Component { 
    static propTypes = { 
    ... 
    } 
} 

trong khi đây là phiên bản es6

class App extends React.Component { 
    ... 
} 

App.propTypes = { 
    ... 
} 

Cá nhân tôi thích phiên bản ES7 vì nó làm cho ý nghĩa hơn để xem các propTypes ở phía trên cùng của các thành phần , để đưa ra một cái nhìn tổng quan về những gì cần thiết để render thành phần (tương tự như các tham số cần thiết cho một hàm).

Bất kể bạn đang sử dụng phiên bản nào, nếu bạn muốn bỏ propTypes để sản xuất, bạn cần sử dụng https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types. Ngoài ra, bạn có thể sử dụng https://github.com/thejameskyle/babel-react-optimize bao gồm biến đổi trên cộng với một số tính năng khác vì tôi đoán bạn cũng muốn tối ưu hóa ứng dụng của mình hơn nữa (: