JSX/React
Bản hướng dẫn này dựa trên những chuẩn phổ biến của Javascript - @Airbnb
Những luật cơ bản
Chỉ chứa một React Component trong 1 file.
Tuy nhiên, những component có khả năng sử dụng lại(Stateless Component, hoặc Pure Components) có thể viết chung một file. eslint:
react/no-multi-comp
.Luôn luôn sử dụng cú pháp JSX.
Không sử dụng
React.createElement
chung với cú pháp JSX.
So sánh class vs React.createClass
vs stateless
React.createClass
vs statelessNếu Component có state hoặc refs, nên sử dụng
class extends React.Component
thay vìReact.createClass
. eslint:react/prefer-es6-class
react/prefer-stateless-function
Và nếu trong Component không có state hoặc refs, nên sử dụng khai báo hàm (không phải arrow function) thay vì class:
Mixins
Chi tiết vì sao không nên sử dụng mixins.
Mixins tạo ra các implicit dependencies(phụ thuộc ngầm), gây ra xung đột tên và tăng độ phức tạp. Có thể thay thế mixins bằng components, higher-order components, hoặc các utility modules(gói tiện ích).
Đặt tên
Phần mở rộng(extensions): Sử dụng phần mở rộng
.jsx
cho React Components.Tên file: Sử dụng chuẩn PascalCase cho tên file. Ví dụ:
ReservationCard.jsx
.Tên tham chiếu(Reference Naming): Sử dụng PascalCase cho React components và dùng camelCase cho các đối tượng(instances) của chúng. eslint:
react/jsx-pascal-case
Đặt tên Component: Sử dụng tên file trùng với tên component. Ví dụ:
ReservationCard.jsx
nên có tên tham chiếu làReservationCard
. Tuy nhiên, đối với các component gốc của một thư mục, hãy sử dụngindex.jsx
làm tên file và sử dụng tên thư mục làm tên component:Đặt tên Higher-order Component: Sử dụng sự kết hợp của Higher-order component và tên của component đuợc truyền như
displayName
(tên hiển thị) trên component đuợc tạo ra. Ví dụ component bậc caowithFoo()
, khi truyền một componentBar
sẽ tạo ra một component vớidisplayName
củawithFoo(Bar)
.Tại sao? Vì
displayName
của component có thể đuợc sử dụng bởi những công cụ phát triển hoặc trong các thông báo lỗi, và có một giá trị mà thể hiện rõ mối quan hệ này sẽ giúp chúng hiểu rõ chuyện gì đang xảy ra.Đặt tên Props: Tránh sử dụng tên props của DOM Component cho mục đích khác.
Tại sao? Mọi nguời mong đợi props như
style
vàclassName
có ý nghĩa riêng. Việc thay đổi mục đích sử dụng của API gốc làm cho mã khó đọc và khó bảo trì hơn, thậm chí có thể gây ra lỗi.
Khai báo
Không nên sử dụng
displayName
để đặt tên cho các Components. Thay vào đó, đặt tên cho các Components bằng references(tham chiếu).
Căn chỉnh mã nguồn
Căn chỉnh cho cú pháp JSX. eslint: react/jsx-closing-bracket-location react/jsx-closing-tag-location
Dấu nháy đơn và nháy kép
Luôn luôn sử dụng dấu ngoặc kép (
"
) cho các thuộc tính JSX, nhưng dấu nháy đơn ('
) cho tất cả các JS khác. Eslint: jsx-quotesTại sao? Vì các thuộc tính HTML thông thường thường sử dụng dấu ngoặc kép thay vì đơn, vì vậy thuộc tính JSX cũng như thế.
Khoảng trắng
Luôn luôn có duy nhất một kí tự space(khoảng trắng) trong thẻ tự đóng. eslint:
no-multi-spaces
,react/jsx-tag-spacing
Không dùng khoảng trắng giữa giá trị bên trong ngoặc nhọn. eslint:
react/jsx-curly-spacing
Props
Luôn luôn sử dụng camelCase khi đặt tên prop (camelCase : viết hoa chữa cái đầu của các từ , từ đầu tiên của cụm thì viết thường)
Bỏ giá trị của prop khi nó thực sự rõ ràng là
true
. eslint:react/jsx-boolean-value
Luôn luôn sử dụng prop
alt
trong thẻ<img>
. Nếu giá trị của thẻ là NULL ,alt
có thể là một chuỗi rỗng hoặc<img>
phải có thuộc tínhrole="presentation"
. eslint:jsx-a11y/alt-text
Không dùng các từ "image", "photo", hoặc "picture" trong
<img>
alt
props. eslint:jsx-a11y/img-redundant-alt
Tại sao? Screenreaders đã tự hiểu
img
elements là image(ảnh), vì vậy không cần khai báo thông tin này trong altChỉ sử dụng ARIA roles. eslint:
jsx-a11y/aria-role
hợp lệ, và không trừu tượng. jsx-a11y/aria-roleKhông dùng
accessKey
trong các elements. eslint:jsx-a11y/no-access-key
Tại sao ? Sự mâu thuẫn giữa phím tắt và các lệnh bàn phím được những người dùng screenreaders sử dụng làm phức tạp hóa khả năng tiếp cận.
Tránh dùng chỉ số của mảng(index) cho thuộc tính
key
, nên sử dụng một unique ID(định danh duy nhất). (why?)Luôn xác định rõ ràng các defaultProp(thuộc tính mặc định) cho tất cả non-required props(thuộc tính không bắt buộc).
Tại sao? propTypes được coi như tài liệu, và cung cấp defaultProps , nghĩa là người đọc mã nguồn của bạn không cần phải đoán quá nhiều. Ngoài ra, nó có thể bỏ qua một số kiểm tra kiểu(type checking).
Hạn chế lạm dụng toán tử spread cho việc truyền props
Tại sao? Vì bạn có khả năng truyền props không cần thiết xuống Components. Và với React v15.6.1 trờ lên, bạn cần chuyển các thuộc tính không hợp lệ của HTML sang DOM.
Ngoại lệ:
HOCs có thể truyền thẳng props xuống và khai báo propTypes
Sử dụng toán tử spread đối với prop được khai báo rõ ràng. Điều này có thể đặc biệt hữu ích khi test các React component với cấu trúc beforeEach của Mocha.
Ghi chú: Nên lọc các props không cần thiết khi có thể. Ngoài ra, sử dụng prop-types-exact để giúp ngăn ngừa lỗi.
Refs
Luôn sử dụng hàm gọi lại(callback) cho khai báo ref. eslint:
react/no-string-refs
Dấu ngoặc đơn
Đóng gói các thẻ JSX trong ngoặc đơn khi chúng kéo dài nhiều dòng. eslint:
react/jsx-wrap-multilines
Thẻ
Luôn luôn tự đóng các thẻ(tags) không có con. eslint:
react/self-closing-comp
Nếu Component của bạn có thuộc tính nhiều dòng, hãy đóng thẻ đó trên 1 dòng mới. eslint:
react/jsx-closing-bracket-location
Phương thức
Sử dụng arrow function để bao đóng các biến cục bộ.
Các hàm binding được gọi trong lúc render nên đặt ở trong hàm khởi tạo(constructor). eslint:
react/jsx-no-bind
Tại sao? Vì nếu bind trong hàm render thì mỗi khi render, hàm đó lại được tạo mới một lần khiến cho hiệu suất xử lí giảm.
Không nên dùng dấu "_" đặt trước tên các hàm của Component
Lí do? Vì dấu gạch dước thi thoảng được dùng trong một số ngôn ngữ để biểu thị tính "private". Tuy nhiên, không giống các ngôn ngữ khác, trong JavaScript, mọi thứ đều là “public”. Cho dù bạn có cho dấu gạch dưới vào hay không nó vẫn là public, bất kể ý định của bạn. Hãy xem vấn đề #1024, và #490 để hiểu sâu hơn.
Phải trả về một giá trị trong hàm
render
. eslint:react/require-render-return
Cách sắp xếp hàm
Các hàm trong
class extends React.Component
nên được viết theo thứ tự sau:Các phương thức tĩnh
static
(không bắt buộc)constructor
getChildContext
componentWillMount
componentDidMount
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
Hàm xử lí sự kiện như click hoặc submit
onClickSubmit()
&onChangeDescription()
Các hàm lấy dữ liệu cho hàm
render
chẳng hạn nhưgetSelectReason()
haygetFooterContent()
Các hàm render khác như
renderNavigation()
hayrenderProfilePicture()
render
Cách định nghĩa
propTypes
,defaultProps
,contextTypes
, ...Các hàm trong
React.createClass
nên được viết theo thứ tự sau:eslint: [
react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)displayName
propTypes
contextTypes
childContextTypes
mixins
statics
defaultProps
getDefaultProps
getInitialState
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
Hàm xử lí sự kiện như
onClickSubmit()
hayonChangeDescription()
Các hàm lấy dữ liệu cho phương thức
render
nhưgetSelectReason()
haygetFooterContent()
Các hàm render khác như
renderNavigation()
hayrenderProfilePicture()
render
Thuộc tính isMounted
isMounted
Không nên sử dụng
isMounted
. eslint:react/no-is-mounted
Tại sao? Vì
isMounted
là một anti-pattern(mẫu nên tránh), không có sẵn khi dùng ES6 classes, và đang bị phản đối từ cộng đồng.
( Nguồn : Airbnb React/JSX Style Guide )
Last updated