Phản ứng thực tiễn tốt nhất và chức năng hữu ích

Lately React đã trở thành công cụ mới được các nhà phát triển sử dụng để tạo mọi thứ từ một ứng dụng trang duy nhất đến các ứng dụng di động. Nhưng kể từ khi tôi bắt đầu đi sâu hơn vào React, tôi đã thấy tất cả các mô-đun nút tuyệt vời này được phát triển cực kỳ tệ. Họ không theo quy tắc, các thành phần là quá lớn. Họ sử dụng trạng thái cho hầu hết mọi thứ, và họ không sử dụng các thành phần câm. Bất cứ ai có đủ kinh nghiệm đều hiểu mức độ rắc rối này phải duy trì và mức độ tải của trình duyệt nếu bạn kết xuất mọi thành phần mỗi lần. Trong bài viết này tôi sẽ hướng dẫn bạn qua các thực tiễn tốt nhất của React, cả về cách thiết lập React và cách làm cho nó cực kỳ nhanh.

Xin lưu ý tôi sẽ tiếp tục cập nhật bài viết này khi các thực tiễn mới xuất hiện.

Trước khi bạn bắt đầu đọc, xin lưu ý React là một thư viện lập trình chức năng (FP). Nếu bạn không biết FP là gì, vui lòng đọc phản hồi Stack Exchange này.

Sử dụng ES6 (được phiên mã với Babel)

ES6 sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều. Nó làm cho JS trông và cảm thấy hiện đại hơn. Một ví dụ tuyệt vời với ES6 là Máy phát điện và Lời hứa. Hãy nhớ khi có một thời gian bạn phải thực hiện một loạt các cuộc gọi lồng nhau để có thể thực hiện một cuộc gọi không đồng bộ. Bây giờ tôi rất vui mừng được chào đón bạn quá đồng bộ JS không đồng bộ, (yea nó rất tuyệt như âm thanh). Một ví dụ tuyệt vời về điều này là máy phát điện:

Cái đó ở đâu:

Biến thành thế này:

Sử dụng gói web

Quyết định sử dụng Webpack rất đơn giản: Tải lại nóng, các tệp được thu nhỏ, các mô-đun nút :) và bạn có thể chia các ứng dụng của mình thành các phần nhỏ và lười tải chúng.

Nếu bạn đang lên kế hoạch xây dựng một ứng dụng quy mô lớn, tôi khuyên bạn nên đọc bài viết này để hiểu cách lười tải hoạt động.

Sử dụng JSX

Nếu bạn đến từ một nền tảng phát triển web, JSX sẽ cảm thấy rất tự nhiên. Nhưng nếu nền tảng của bạn không có trong web phát triển thì hãy lo lắng quá nhiều, JSX rất dễ học. Lưu ý rằng nếu don lồng bạn don don sử dụng JSX, ứng dụng sẽ khó bảo trì hơn.

Luôn luôn nhìn vào kích thước bó của bạn

Một mẹo để làm cho gói của bạn nhỏ hơn là nhập trực tiếp từ đường dẫn gốc của mô-đun nút.

Làm cái này:

nhập Foo từ ‘foo / Foo

thay vì:

Nhập {Foo} từ ‘foo,

Giữ các thành phần của bạn nhỏ (Rất nhỏ)

Nguyên tắc chung là nếu phương thức kết xuất của bạn có hơn 10 dòng có lẽ là quá lớn. Toàn bộ ý tưởng của việc sử dụng React là khả năng sử dụng lại mã, vì vậy nếu bạn chỉ cần ném mọi thứ vào một tệp, bạn sẽ mất đi vẻ đẹp của React.

Những gì cần phải có thành phần riêng của mình?

Khi suy nghĩ React bạn cần nghĩ về khả năng sử dụng lại mã và cấu trúc mã. Bạn sẽ không tạo một thành phần cho một thành phần đầu vào đơn giản chỉ có một dòng mã. Một thành phần là sự pha trộn của các phần tử HTML HTML mà người dùng cảm nhận như một. Tôi biết rằng điều này nghe có vẻ hơi lạ nhưng hãy xem một ví dụ. Hãy nhìn vào màn hình đăng nhập này:

Cấu trúc đằng sau nó là gì Bạn có một hình thức chứa hai đầu vào một nút và một liên kết. Hãy xem mã này trong mã:

Có chuyện gì ở đây vậy? Sự lặp lại. Các đầu vào chứa cấu trúc tương tự, tại sao không biến nó thành một thành phần.

Bây giờ thì đẹp rồi. Tôi sẽ không nhận được nhiều chi tiết ở đây nhưng nếu bạn muốn tiếp tục đọc, hãy đến Thinking React.

Còn nhà nước thì sao?

Thực hành tốt nhất trong React là giảm thiểu trạng thái của bạn. Một điều cần lưu ý là tránh trạng thái đồng bộ hóa giữa trẻ và cha mẹ. Trong ví dụ trên, chúng ta có một biểu mẫu ở dạng đó, trạng thái được truyền lại dưới dạng đạo cụ từ chế độ xem và mỗi khi người dùng cập nhật mật khẩu và tên người dùng, trạng thái được cập nhật trong dạng xem chứ không phải biểu mẫu.

Sử dụng ShouldComponentUpdate để tối ưu hóa hiệu suất

React là một ngôn ngữ tạo khuôn mẫu làm cho MỌI LÚC các đạo cụ hoặc trạng thái của thành phần thay đổi. Vì vậy, hãy tưởng tượng phải hiển thị toàn bộ trang mỗi lần có hành động. Điều đó có một tải lớn trên trình duyệt. Đó là nơi mà ShouldComponentUpdate xuất hiện, bất cứ khi nào React hiển thị chế độ xem, nó sẽ kiểm tra xem liệu ShouldComponentUpdate có trả về false / true không. Vì vậy, bất cứ khi nào bạn có một thành phần mà tĩnh tĩnh hãy tạo cho mình một ưu tiên và trả về false. Hoặc nếu không kiểm tra tĩnh để xem liệu đạo cụ / trạng thái đã thay đổi.

Nếu bạn muốn đọc thêm về tối ưu hóa hiệu suất, hãy đọc bài viết của tôi về React Perf

Nghĩ về sự bất ổn

Nếu bạn đến từ Scala hoặc các ngôn ngữ hiệu suất cao khác thì không thể hiểu được là một khái niệm mà bạn có thể thực sự quen thuộc. Nhưng nếu bạn không quen thuộc với khái niệm này, hãy nghĩ đến sự bất biến như sinh đôi. Chúng rất giống nhau và chúng trông giống nhau nhưng chúng không bằng nhau. Ví dụ:

Chuyện gì vừa xảy ra vậy? Object2 được tạo ra như một tham chiếu của object1 có nghĩa là theo mọi nghĩa của từ object2 là một cách khác để tham chiếu object1. Khi tôi tạo object3 tôi đã tạo một đối tượng mới có cùng cấu trúc với object1. Hàm Object.assign nhận một đối tượng mới và sau đó nhân bản cấu trúc của object1 do đó tạo ra một tham chiếu mới để khi bạn so sánh object1 với object3 thì chúng khác nhau. Tại sao điều này có ý nghĩa? Hãy nghĩ về tối ưu hóa hiệu suất, tôi đã đề cập ở trên rằng React tái hiện mỗi khi trạng thái của một thành phần thay đổi. Khi sử dụng hàm ShouldComponentUpdate thay vì kiểm tra sâu để xem liệu tất cả các thuộc tính có khác nhau không, bạn chỉ cần so sánh các đối tượng. Nếu bạn muốn biết thêm hãy tiếp tục đọc bài viết này.

Sử dụng các thành phần thông minh và ngu ngốc

Không có gì nhiều để nói ở đây ngoài việc bạn không cần phải có một trạng thái trong mọi đối tượng. Lý tưởng nhất là bạn sẽ có một cái nhìn cha mẹ thông minh và tất cả những đứa trẻ là những thành phần câm chỉ nhận được đạo cụ và don sắt có bất kỳ logic nào trong đó. Bạn có thể tạo một thành phần câm bằng cách làm một cái gì đó như thế này:

Các thành phần câm cũng dễ gỡ lỗi hơn vì nó thực thi phương pháp từ trên xuống mà React là tất cả.

Sử dụng PropTypes

PropTypes giúp bạn thiết lập xác thực dữ liệu cho các thành phần. Điều này rất hữu ích khi gỡ lỗi và khi làm việc với nhiều nhà phát triển. Bất cứ ai làm việc với một nhóm lớn nên đọc bài viết này.

Luôn liên kết các hàm trong phương thức constructor

Bất cứ khi nào làm việc với các thành phần sử dụng trạng thái cố gắng liên kết các thành phần trong phương thức constructor. Hãy nhớ rằng bạn có thể sử dụng ES7 ngay bây giờ và bạn có thể liên kết các hàm bằng cách sử dụng một cái gì đó như thế này ngay bây giờ (Thay vì ràng buộc trong hàm tạo):

someFactor = () => {
}

Sử dụng Redux / thông lượng

Khi xử lý dữ liệu bạn muốn sử dụng Flux hoặc Redux. Flux / Redux cho phép bạn xử lý dữ liệu dễ dàng và giảm bớt đau đớn khi xử lý bộ đệm phía trước. Cá nhân tôi sử dụng Redux vì nó buộc bạn phải có cấu trúc tệp được kiểm soát nhiều hơn.

Hãy nhớ rằng đôi khi rất hữu ích khi sử dụng Redux / Flux nhưng bạn có thể không cần giữ toàn bộ trạng thái của ứng dụng trong một đối tượng đơn giản. Đọc thêm về nó ở đây.

Sử dụng normalizr

Bây giờ chúng ta đang nói về dữ liệu, tôi sẽ dành một chút thời gian và giới thiệu với bạn về chén thánh xử lý các cấu trúc dữ liệu phức tạp. Normalizr cấu trúc các đối tượng json lồng nhau của bạn thành các cấu trúc đơn giản mà bạn có thể sửa đổi khi đang bay.

Cấu trúc tệp

Tôi sẽ đưa ra một tuyên bố thẳng thừng ở đây và nói rằng tôi chỉ thấy 2 cấu trúc tệp với React / Redux giúp mọi thứ dễ dàng hoạt động.

Cấu trúc đầu tiên:

Cấu trúc thứ hai:

Sử dụng Container (Đã gỡ bỏ - Cập nhật Chương 2017)

Lý do bạn muốn sử dụng các thùng chứa truyền dữ liệu là vì bạn muốn tránh phải kết nối mọi chế độ xem với cửa hàng khi giao dịch với Flux / Redux. Cách tốt nhất để làm điều này là tạo hai container. Một cái chứa tất cả các khung nhìn an toàn (các khung nhìn cần xác thực) và một khung nhìn chứa tất cả các khung nhìn không an toàn. Cách tốt nhất để tạo ra một thùng chứa cha mẹ là nhân bản trẻ em và truyền lại các đạo cụ mong muốn.

Thí dụ:

Sử dụng Mẫu thay vì Container

Trong khi làm việc với các container và nhân bản các đạo cụ xuống các khung nhìn, tôi đã tìm thấy một cách hiệu quả hơn để làm điều này. Cách tôi giới thiệu bây giờ thay vì sử dụng các thùng chứa là tạo một BaseTemplate được mở rộng bởi AuthenticatedTemplate và NotAuthenticatedBaseTemplate. Trong hai mẫu, bạn sẽ thêm tất cả các chức năng và trạng thái được chia sẻ trên tất cả các chế độ xem không xác thực / xác thực. Trong chế độ xem thay vì mở rộng React.Component, bạn mở rộng mẫu. Bằng cách này, bạn tránh nhân bản bất kỳ đối tượng nào và bạn có thể lọc các đạo cụ được gửi xuống cây thành phần.

Tránh giới thiệu

Ref sẽ chỉ làm cho mã của bạn khó bảo trì hơn. Thêm vào đó, khi bạn sử dụng ref, bạn đang thao tác trực tiếp với Dom ảo. Điều đó có nghĩa là thành phần này sẽ phải kết xuất lại toàn bộ cây Dom.

Sử dụng xác thực Prop

PropTypes sẽ làm cho cuộc sống của bạn tốt hơn rất nhiều khi làm việc với một nhóm lớn. Chúng cho phép bạn dường như gỡ lỗi các thành phần của bạn. Họ cũng sẽ làm cho việc gỡ lỗi của bạn dễ dàng hơn rất nhiều. Theo cách bạn đang thiết lập các yêu cầu tiêu chuẩn cho một thành phần cụ thể.

Những bình luận khác

Tôi muốn nhấn mạnh rằng bạn nên chia tất cả các thành phần của mình thành các tệp riêng lẻ.

Sử dụng bộ định tuyến: Không có nhiều điều để nói ở đây ngoài việc bạn muốn tạo một ứng dụng trang duy nhất bạn cần một bộ định tuyến. Cá nhân tôi sử dụng React Router.

Nếu bạn đang sử dụng thông lượng, hãy nhớ hủy liên kết cửa hàng để nghe các sự kiện thay đổi. Bạn không muốn tạo rò rỉ bộ nhớ.

Nếu bạn muốn thay đổi tiêu đề ứng dụng của mình một cách linh hoạt, bạn có thể làm một cái gì đó như thế này:

Repo này là một ví dụ tuyệt vời về xác thực React / Redux.

Có gì mới trong năm 2017

Hãy sẵn sàng cho một viết lại lớn. Những người tạo ra phản ứng hiện đang xây dựng lại phản ứng cốt lõi. Nó có hiệu suất tốt hơn, hình ảnh động tốt hơn và nhiều API hơn mà bạn có thể tận dụng để xây dựng các ứng dụng lớn. Bạn có thể đọc thêm ở đây.

Chức năng trợ giúp hữu ích

Hàm sau là hàm so sánh Object. Cách sử dụng: kiểm tra xem trạng thái hoặc đạo cụ có thay đổi trong ShouldComponentUpdate không

Tạo giảm tốc một cách linh hoạt

Sử dụng:

Tạo hằng số:

Kết xuất nếu:

Cách sử dụng: kết xuất thành phần nếu SomethingTrue

Thay đổi giá trị trạng thái động:

Webpack.config.js của tôi

Hãy đọc về Ứng dụng hiệu suất cao React ở đây.

Nếu bạn thích bài viết này, xin vui lòng bấm vào đó màu xanh lá cây để người khác có thể thưởng thức nó. Ngoài ra, vui lòng đặt câu hỏi hoặc để lại ghi chú với bất kỳ thực tiễn hữu ích hoặc chức năng hữu ích mà bạn biết.

Theo dõi tôi trên twitter @nesbtesh