Những từ mang nặng tính kĩ thuật sẽ được giữ nguyên để tránh sự nhầm lẫn. Tuy nhiên có thể bạn sẽ thích một phiên bản thuần Việt hơn, cứ thoải mái đóng góp nhé ;]
Mục lục
- Những luật cơ bản
- So sánh Class vs
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
1 vs stateless - Mixins
- Đặt tên
- Khai báo
- Căn chỉnh mã nguồn
- Dấu nháy đơn và nháy kép
- Khoảng trắng
- Props
- Refs
- Dấu ngoặc đơn
- Thẻ
- Phương thức
- Cách sắp xếp hàm
- Thuộc tính
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
2
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:
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
3. - Luôn luôn sử dụng cú pháp JSX. - Không sử dụng
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
4 chung với cú pháp JSX.
So sánh class vs // tệ
import Footer from './Footer/Footer';
// tệ
import Footer from './Footer/index';
// tốt
import Footer from './Footer';
1 vs stateless
Nếu Component có state hoặc refs, nên sử dụng
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
6 thay vì// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
1. eslint:// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
8// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
9// tệ const Listing = React.createClass[{ // ... render[] { return {this.state.hello}; } }]; // tốt class Listing extends React.Component { // ... render[] { return {this.state.hello}; } }
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:
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
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
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
0 cho React Components.Tên file: Sử dụng chuẩn PascalCase cho tên file. Ví dụ:
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
1.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:
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
2// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
Đặt tên Component: Sử dụng tên file trùng với tên component. Ví dụ:
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
1 nên có tên tham chiếu là// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
4. Tuy nhiên, đối với các component gốc của một thư mục, hãy sử dụng// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
5 làm tên file và sử dụng tên thư mục làm tên component:// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
Đặ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ư
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
6[tên hiển thị] trên component đuợc tạo ra. Ví dụ component bậc cao// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
7, khi truyền một component// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
8 sẽ tạo ra một component với// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
6 của// tệ // tệ // tốt
0.Tại sao? Vì
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
6 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ệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
Đặ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ư
// tệ // tệ // tốt
2 và// tệ // tệ // tốt
3 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.// tệ // tệ // tốt
Khai báo
Không nên sử dụng
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
6 để đặt tên cho các Components. Thay vào đó, đặt tên cho các Components bằng references[tham chiếu].// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
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
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
Dấu nháy đơn và nháy kép
Luôn luôn sử dụng dấu ngoặc kép [
// tệ // tệ // tốt
5] cho các thuộc tính JSX, nhưng dấu nháy đơn [// tệ // tệ // tốt
6] 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ế.
// tệ // tốt // tệ // tốt
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:
// tệ // tệ // tốt
7,// tệ // tệ // tốt
8// tệ // rất tệ // tệ // tốt
Không dùng khoảng trắng giữa giá trị bên trong ngoặc nhọn. eslint:
// tệ // tệ // tốt
9// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
0
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]
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
1Bỏ giá trị của prop khi nó thực sự rõ ràng là
// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
0. eslint:// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
1// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
2Luôn luôn sử dụng prop
// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
2 trong thẻ// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
3. Nếu giá trị của thẻ là NULL ,// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
2 có thể là một chuỗi rỗng hoặc// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
3 phải có thuộc tính// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
6. eslint:// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
7// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
3Không dùng các từ "image", "photo", hoặc "picture" trong
// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
3// tệ export default React.createClass[{ displayName: 'ReservationCard', // một số thứ khác }]; // tốt export default class ReservationCard extends React.Component { }
2 props. eslint:// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
0Tại sao? Screenreaders đã tự hiểu
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
1 elements là image[ảnh], vì vậy không cần khai báo thông tin này trong alt// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
4Chỉ sử dụng ARIA roles. eslint:
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
2 hợp lệ, và không trừu tượng. jsx-a11y/aria-role// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
5Không dùng
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
3 trong các elements. eslint:// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
4Tạ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.
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
6Tránh dùng chỉ số của mảng[index] cho thuộc tính
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
5, nên sử dụng một unique ID[định danh duy nhất]. [why?]// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
7Luô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].
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
8Hạ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
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
9Sử 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.
// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
0Ghi 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.
// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
1
Refs
Luôn sử dụng hàm gọi lại[callback] cho khai báo ref. eslint:
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
6// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
2
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:
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
7// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
3
Thẻ
Luôn luôn tự đóng các thẻ[tags] không có con. eslint:
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
8// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
4Nế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:
// tệ // tốt // Nếu props phù hợp trong một dòng thì giữ nó trên cùng một dòng // Component con được thụt lề bình thường
9// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
5
Phương thức
Sử dụng arrow function để bao đóng các biến cục bộ.
// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
6Các hàm binding được gọi trong lúc render nên đặt ở trong hàm khởi tạo[constructor]. eslint:
// tệ // tốt // tệ // tốt
0Tạ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.
// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
7Khô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.
// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
8Phải trả về một giá trị trong hàm
// tệ // tốt // tệ // tốt
1. eslint:// tệ // tốt // tệ // tốt
2// tệ import reservationCard from './ReservationCard'; // tốt import ReservationCard from './ReservationCard'; // tệ const ReservationItem = ; // tốt const reservationItem = ;
9
Cách sắp xếp hàm
- Các hàm trong
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
6 nên được viết theo thứ tự sau:
- Các phương thức tĩnh
// tệ // tốt // tệ // tốt
4 [không bắt buộc] // tệ // tốt // tệ // tốt
5// tệ // tốt // tệ // tốt
6// tệ // tốt // tệ // tốt
7// tệ // tốt // tệ // tốt
8// tệ // tốt // tệ // tốt
9// tệ // rất tệ // tệ // tốt
0// tệ // rất tệ // tệ // tốt
1// tệ // rất tệ // tệ // tốt
2- Hàm xử lí sự kiện như click hoặc submit
// tệ // rất tệ // tệ // tốt
3 &// tệ // rất tệ // tệ // tốt
4 - Các hàm lấy dữ liệu cho hàm
// tệ // tốt // tệ // tốt
1 chẳng hạn như// tệ // rất tệ // tệ // tốt
6 hay// tệ // rất tệ // tệ // tốt
7 - Các hàm render khác như
// tệ // rất tệ // tệ // tốt
8 hay// tệ // rất tệ // tệ // tốt
9 // tệ // tốt // tệ // tốt
1
Cách định nghĩa
// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
01,// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
02,// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
03, ...// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
0Các hàm trong
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
1 nên được viết theo thứ tự sau:// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
05react/sort-comp`][//github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md]
// tệ export default function withFoo[WrappedComponent] { return function WithFoo[props] { return ; } } // tốt export default function withFoo[WrappedComponent] { function WithFoo[props] { return ; } const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithFoo.displayName = `withFoo[${wrappedComponentName}]`; return WithFoo; }
6// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
01// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
03// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
09// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
10// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
11// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
02// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
13// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
14// tệ // tốt // tệ // tốt
6// tệ // tốt // tệ // tốt
7// tệ // tốt // tệ // tốt
8// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
18// tệ // tốt // tệ // tốt
9// tệ // rất tệ // tệ // tốt
0// tệ // rất tệ // tệ // tốt
1// tệ // rất tệ // tệ // tốt
2- Hàm xử lí sự kiện như
// tệ // rất tệ // tệ // tốt
3 hay// tệ // rất tệ // tệ // tốt
4 - Các hàm lấy dữ liệu cho phương thức
// tệ // tốt // tệ // tốt
1 như// tệ // rất tệ // tệ // tốt
6 hay// tệ // rất tệ // tệ // tốt
7 - Các hàm render khác như
// tệ // rất tệ // tệ // tốt
8 hay// tệ // rất tệ // tệ // tốt
9 // tệ // tốt // tệ // tốt
1
Thuộc tính // tệ
import Footer from './Footer/Footer';
// tệ
import Footer from './Footer/index';
// tốt
import Footer from './Footer';
2
- Không nên sử dụng
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';
2. eslint:// tệ class Listing extends React.Component { render[] { return {this.props.hello}; } } // tệ [dựa vào tên hàm để suy luận thì rất đau đầu] const Listing = [{ hello }] => [ {hello} ]; // tốt function Listing[{ hello }] { return {hello}; }
33
Tại sao? Vì
// tệ import Footer from './Footer/Footer'; // tệ import Footer from './Footer/index'; // tốt import Footer from './Footer';2 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.