Thực hành tốt nhất PRDXN từ phản ứng

Facebook phản ứng là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng (UI).

Khi tôi lần đầu tiên bắt đầu viết mã trong React, tôi nhớ đã thấy nhiều cách tiếp cận khác nhau khác nhau rất nhiều từ hướng dẫn đến hướng dẫn. Vì vậy, nhóm của tôi tại PRDXN và tôi đã đưa ra một hướng dẫn / danh sách các thực hành tốt nhất (BP) sẽ giúp tất cả chúng ta đạt được tốc độ nhanh hơn.

Facebook phản ứng là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng (UI).

Sau đây là hướng dẫn của chúng tôi. Chúng tôi hy vọng điều này sẽ giúp bạn tăng tốc việc áp dụng và sử dụng React; cho dù bạn chỉ mới bắt đầu / người mới bắt đầu hay nhà phát triển có kinh nghiệm.

1. Duy trì cấu trúc thư mục có tổ chức:

Như với bất kỳ dự án lập trình / mã hóa, điều này rất quan trọng! Nếu các tệp dự án của bạn không được tổ chức hợp lý, bạn và cộng tác viên của bạn có thể bị lẫn lộn và lãng phí thời gian quý báu để tìm kiếm các tệp hoặc chỉnh sửa các tệp sai.

Tại PRDXN, chúng tôi đã đưa ra cấu trúc thư mục sau đây để làm cho mọi thứ dễ dàng hơn và ít gây khó chịu hơn cho mọi người. Nhấn vào chơi để xem.

2. Thành phần - Chunks & Cây. Xin chào, bạn là một Lumberjack Javascript!

Các thành phần là trái tim của một React. Một thành phần React về cơ bản là bất kỳ phần nào của UI.

Tạo khối giao diện người dùng logic (nhóm): Luôn chia các thành phần của bạn thành các khối (hay còn gọi là nhóm logic). Xem xét bất kỳ giao diện ứng dụng nào và bắt đầu chia UI thành các phần logic nhỏ hơn. Mỗi khối UI (nhóm) này là các thành phần tiềm năng.

Cây, nhánh và nhánh phụ: Toàn cảnh / toàn bộ giao diện người dùng (cây hoặc thân cây) được chia thành các khối logic (còn gọi là các nhánh). Cây trở thành thành phần bắt đầu (một thành phần bố cục) và sau đó mỗi đoạn trong UI (còn gọi là nhánh) sẽ trở thành một thành phần phụ có thể được chia thành các thành phần phụ (còn gọi là nhánh con). Điều này giữ cho UI được tổ chức và cũng cho phép thay đổi dữ liệu và trạng thái để logic một cách hợp lý từ cây đến các nhánh và sau đó là các nhánh con.

Tạo các nhóm UI UI hợp lý (Chunks): Cây, Chi nhánh, Chi nhánh!

3. Thành phần - Chức năng và dựa trên lớp:

Có hai loại thành phần: chức năng và dựa trên lớp.

Khi nào tôi nên đi với một thành phần chức năng? Đi với một thành phần chức năng nếu thành phần của bạn không làm nhiều hơn là kết xuất đạo cụ. Hãy nghĩ về các thành phần chức năng như các hàm thuần túy: chúng sẽ luôn hiển thị cùng một cách và hoạt động theo cùng một cách, được đưa ra cùng một đạo cụ. Ngoài ra, họ không quan tâm đến các phương pháp vòng đời; chúng là thành phần phi trạng thái.

Thành phần chức năng, ví dụ.

Khi nào tôi nên đi với một thành phần dựa trên lớp? Nếu thành phần của bạn cần các phương thức vòng đời trạng thái và thành phần bên trong thì hãy tìm một thành phần dựa trên lớp. Hãy xem điều này để giúp bạn hiểu thêm về các phương thức vòng đời của Nhà nước và trên mạng.

Thành phần dựa trên lớp, ví dụ.

4. Đạo cụ! Đạo cụ cho bạn! Đạo cụ cho tôi! Nhưng không, chúng tôi nói chuyện với Đạo cụ React!

Về mặt khái niệm, các thành phần giống như các hàm JavaScript. Họ chấp nhận các đầu vào tùy ý (được gọi là đạo cụ trực tiếp) và trả về các phần tử React mô tả những gì sẽ xuất hiện trên màn hình. Nhấp chuột vào nguồn.

Mang theo những con lạc đà! Không, bạn có thể để những con lạc đà trong món tráng miệng. Chúng tôi nói chuyện với lạc đà ở đây. Luôn sử dụng camelCase cho tên prop. Đạo cụ cũng có thể được xem như là các thuộc tính và quy ước do React đặt ra là sử dụng camelCase cho các thuộc tính JSX.

Luôn sử dụng camelCase cho tên prop.

Tin tôi đi, nó thật đấy, tôi thề! Bỏ qua giá trị của prop khi nó rõ ràng đúng. Ngay cả khi chúng tôi không chỉ định một giá trị thực sự cho một chỗ dựa thì nó đã coi đó là một giá trị thực sự, do đó, bạn không cần phải gán ’true đúng như một giá trị cho prop.

Bỏ qua giá trị của prop khi nó rõ ràng đúng.

Tránh sử dụng một chỉ số mảng làm chỗ dựa chính; thay vào đó, hãy sử dụng một ID duy nhất: Chúng tôi đã thấy quá nhiều nhà phát triển sử dụng chỉ mục của một mục làm khóa khi họ kết xuất một danh sách, điều đó thật không tốt! Đây là những gì họ viết không chính xác

ĐÂY LÀ VÍ DỤ VỀ NHỮNG GÌ BẠN NÊN *** KHÔNG *** LÀM!

Khóa là thứ duy nhất React sử dụng để xác định các thành phần DOM. Vì vậy, điều gì xảy ra nếu bạn đẩy một mục vào danh sách hoặc loại bỏ một cái gì đó từ giữa? Nếu khóa giống như trước, React giả định rằng phần tử DOM đại diện cho cùng một bộ thành phần (như trước). Nhưng đây không phải là trường hợp!

Đây là lý do tại sao bạn nên sử dụng một ID duy nhất. Mỗi mục nên có một tài sản vĩnh viễn và duy nhất (ID). Và lý tưởng là nó (ID) nên được chỉ định khi mục được tạo. Vì vậy, nó đã viết ra một cái gì đó như thế này

ĐÂY LÀ VÍ DỤ CỦA NHỮNG GÌ BẠN NÊN *** LÀM!

Luôn xác định defaultProps rõ ràng cho tất cả các đạo cụ không bắt buộc. Cung cấp defaultProps có nghĩa là người đọc mã của bạn không phải giả định mọi thứ, bởi vì họ sẽ biết giá trị mặc định cho prop chỉ bằng cách nhìn vào defaultProps trong khi kết xuất các thành phần.

Bad vs Good ví dụ lại: xác định defaultProps.

Như bạn có thể thấy, có những điều nhỏ nhưng rất quan trọng khiến cho mã React của bạn không bị lỗi trong quá trình xem xét. Dành thời gian trả trước để tìm hiểu những thực tiễn tốt nhất này và sử dụng chúng, có nghĩa là bạn dành ít thời gian để viết lại mã để sửa lỗi, cho bạn nhiều thời gian hơn để làm những việc bạn yêu thích. Và nếu làm những việc bạn yêu thích có nghĩa là viết mã, bạn sẽ có thêm thời gian để viết mã cho một dự án khác!

Có thể tìm thấy nhiều cách thực hành tốt nhất của PRDXN từ đây trên Github: https://github.com/prdxn/React-JS-Checklist. Xin vui lòng chia sẻ và đóng góp vào danh sách này. Và nếu bạn có bất kỳ vấn đề nào trong việc truy cập, hãy liên hệ với chúng tôi trong các bình luận ở đây.

Quan tâm đến việc làm việc với PRDXN với tư cách là khách hàng hoặc nhân viên? Sau đó đánh chúng tôi lên! Truy cập www.prdxn.com tại đây để biết thêm chi tiết, bao gồm chi tiết liên lạc.