Thực hành tốt nhất 2019 ReactJS

[cập nhật, ngày 22 tháng 5 năm 2019] - Thêm một thực tiễn tốt nhất khác vào danh sách. Xem bên dưới.

[cập nhật, ngày 19 tháng 5 năm 2019] - Chúng tôi đã thêm một bài viết mới về Redux và Redux-Thunk. Giải thích đơn giản với rất nhiều ví dụ.

[cập nhật, ngày 23 tháng 7 năm 2019] - Do nhiều yêu cầu, chúng tôi sẽ thêm một bài viết mới về ReactJS ANTIpotypes. Các liên kết sẽ được đăng ở đây. Xin hãy ủng hộ với một cái vỗ tay. Cảm ơn bạn!

1. Xin chào mừng, ReactJS

Trong năm năm qua, ReactJS đã nhanh chóng tăng mức độ phổ biến và đến đầu năm 2018, nó đã trở nên phổ biến hơn jQuery, ít nhất là về mặt tìm kiếm của Google. Chúng tôi sẽ không so sánh các công cụ về nhu cầu của họ trong các công cụ tìm kiếm; tuy nhiên, điều đó cho chúng ta hiểu rõ rằng thư viện ReactJS chắc chắn rất phổ biến. Với điều đó đã được nói, hãy để nói về việc sử dụng ReactJS để tạo các ứng dụng Front-End tốt hơn.

Chúng tôi thực sự thích nhìn thấy bạn thưởng thức các bài viết của chúng tôi. Vì vậy, nếu bạn thấy bài viết này hữu ích, vui lòng nhấn vào nút bên dưới :)

Điều gì làm cho ReactJS trở nên phổ biến, bên cạnh thực tế là Facebook đã tạo ra nó? Chúng tôi nghĩ rằng nó rất khó do ReactJS hoạt động đơn giản. Thật dễ dàng để tìm hiểu và nó được tối ưu hóa cho hiệu suất bằng cách sử dụng DOM ảo của nó. Bằng cách triển khai DOM ảo, ReactJS cung cấp một công cụ kết xuất một cách để nhanh chóng kết xuất lại chỉ những yếu tố cần được cập nhật. Do đó, các nhà phát triển ReactJS đang nhận được các ứng dụng nhanh và dễ sử dụng.

ReactJS là một thư viện sử dụng JavaScript để tạo ứng dụng. Để bắt đầu xây dựng các ứng dụng trong ReactJS, bạn cần tìm hiểu API của nó và biết JavaScript. JavaScript có lẽ là ngôn ngữ lập trình phổ biến nhất hiện nay. ReactJS cũng cho phép các nhà phát triển mô hình hóa và mô tả một ứng dụng trong các thành phần UI. Vì vậy, bạn chỉ cần nói phải làm gì và ReactJS biết làm thế nào để làm điều đó.

Dưới đây là một số xu hướng trong năm năm qua từ Google:

Một trong những khái niệm ReactJS chính là bạn tạo các thành phần gắn kết, có thể tái sử dụng, có thể kết hợp lại với nhau và tạo thành một ứng dụng. Mỗi thành phần có thể có trạng thái riêng trừ khi nó không có trạng thái (sẽ nói thêm về điều này sau). ReactJS thu thập tất cả các thành phần của bạn vào một nhóm và áp dụng một số kỹ thuật tối ưu hóa như DOM ảo để hiển thị ứng dụng trong trình duyệt của bạn một cách hiệu quả.

Hãy bắt đầu bằng cách làm rõ một thành phần là gì và nó không phải là gì. Thành phần này là một phần độc lập, độc lập của UI. Mỗi thành phần có thể nhúng các thành phần khác, trong đó mỗi thành phần có trạng thái và API. Theo quy ước, bạn nên giữ mã liên quan đến thành phần của mình trong một thư mục cụ thể. Giữ tất cả các tệp cho mỗi thành phần trong một thư mục cho phép bạn tạo các thành phần có thể sử dụng lại để bạn có thể sử dụng chúng trong các ứng dụng khác.

2. Các loại thành phần ReactJS

Có bốn loại thành phần ReactJS chính:

  1. Các thành phần đầy đủ nhà nước hoặc lớp học
  2. Các thành phần ít nhà nước hoặc dựa trên chức năng
  3. Các thành phần trình bày (hoặc thứ tự cao)
  4. Thành phần container

Một cấu trúc ưa thích của cây thành phần của bạn được hiển thị bên trái.

Các thành phần đầy đủ trạng thái hoặc các thành phần dựa trên lớp

Một thành phần đầy đủ trạng thái có trạng thái và dữ liệu liên quan đến trạng thái. Bạn có thể truyền dữ liệu bên trong loại thành phần này thông qua các đối tượng trạng thái hoặc đạo cụ. Các thành phần đầy đủ trạng thái cũng khó hỗ trợ hơn vì chúng vẫn tồn tại một số dữ liệu và có thể thay đổi trạng thái toàn cầu của ứng dụng. Ngoài ra, các thành phần đầy đủ trạng thái thường là các thành phần dựa trên lớp có hàm tạo (nó được coi là cách thực hành tốt nhất để đặt trạng thái cho thành phần của bạn trong hàm tạo).

Dưới đây là một ví dụ về thành phần ReactJS đầy đủ, dựa trên lớp:

Đạo cụ là bất biến và bị ràng buộc một chiều với một trạng thái, và đây là lý do tại sao bạn không thể thay đổi chúng trong thành phần của mình. Bạn sử dụng đạo cụ để đặt trạng thái cho thành phần và hiển thị giao diện người dùng của nó. Nếu bạn cố gắng thay đổi đạo cụ trong thành phần của mình, bạn sẽ gặp Lỗi Loại.

Nhà nước là một đối tượng được tiếp xúc với một thành phần. Phạm vi trạng thái được giới hạn trong bên trong thành phần nơi nó được khai báo. Các thành phần có thể khởi tạo trạng thái và chuyển nó sang thành phần khác. Chúng ta có thể khai báo một trạng thái theo hai cách, sử dụng hàm tạo hoặc khai báo thuộc tính trạng thái. Với trường hợp thứ hai, đó chỉ là đường cú pháp và bộ chuyển mã (như Babel) sẽ biến khai báo tài sản nhà nước của bạn thành hàm tạo cho bạn dưới mui xe. Các thành phần không có trạng thái hoặc các thành phần dựa trên chức năng và những gì React Hook dành cho các thành phần dựa trên Hàm chỉ là các hàm JavaScript đơn giản. Các thành phần dựa trên chức năng trả về một phần tử ReactJS hoặc một bộ sưu tập, có thể là một thành phần một phần, như <> ... hoặc một thành phần dựa trên chức năng đầy đủ với logic và các thành phần nhúng. Vì bạn không thể sử dụng hàm tạo trong thành phần dựa trên chức năng (thực tế là bạn làm như vậy, vì ReactJS v16.8), nên bạn không thể làm cho thành phần của mình đầy đủ. Nó không phải là trạng thái vì bạn không thể lưu bất kỳ dữ liệu nào trong các loại thành phần này. Thông thường bạn chuyển các đạo cụ cho thành phần dựa trên chức năng để hiển thị UI của nó. Đây là một ví dụ về thành phần ReactJS dựa trên trạng thái, không có chức năng:

Từ quan điểm hiệu năng, thực tế không có sự khác biệt giữa việc sử dụng các thành phần dựa trên lớp và sử dụng các thành phần dựa trên chức năng. Cơ chế kết xuất ReactJS đủ thông minh để tối ưu hóa điều đó cho chúng ta.

Các thành phần dựa trên chức năng dễ dàng làm việc hơn và thoải mái hơn để kiểm tra. Đây là lý do tại sao cộng đồng các nhà phát triển ReactJS sẽ mời bạn viết các thành phần dựa trên chức năng thay vì các thành phần dựa trên lớp. Các thành phần dựa trên chức năng không có trạng thái có một số hạn chế và về cơ bản phải có một vị trí toàn cầu để quản lý nhà nước. Điều đó khác với mô hình viết các thành phần ReactJS (để biết thêm chi tiết, xem bên dưới).

Để cho phép các nhà phát triển viết các thành phần dựa trên trạng thái, đầy đủ chức năng và đồng thời cung cấp khả năng sử dụng các phương thức vòng đời trạng thái và thành phần, React v16.8 đã thêm một tính năng mới gọi là React Hook. Về cơ bản, React Hook là một nỗ lực để loại bỏ các thành phần dựa trên lớp. Với React Hook, bạn có thể viết các thành phần dựa trên trạng thái đầy đủ mà không cần sử dụng các lớp. Có lẽ chúng ta sẽ thấy các thành phần dựa trên lớp bị loại bỏ với Hook tại một thời điểm nào đó trong tương lai.

React Hook cũng nhằm mục đích đơn giản hóa thiết kế ứng dụng bằng cách tránh các thành phần không có hoặc không cần các hàm tạo mặc dù chúng được khai báo là các lớp. Thông thường bạn làm việc với các thành phần không có nhà nước nếu bạn nghĩ về thiết kế lý tưởng của ứng dụng của bạn. Khi chúng tôi xây dựng các ứng dụng ReactJS cho khách hàng của mình, chúng tôi thường sử dụng một lớp mỏng giữa biểu diễn thành phần của chúng tôi và logic ứng dụng. Điều này cho phép chúng ta tách rời biểu diễn trực quan của thành phần khỏi hành vi của nó.

3. Giảm dữ liệu, hành động lên

Mẫu thiết kế «Data Down, Action Up» là gì? Về cơ bản, điều đó có nghĩa là bạn có Thành phần bậc cao (HOC - xem phần giải thích bên dưới) chấp nhận dữ liệu trong `props` của nó và chuyển dữ liệu đó xuống chế độ xem hoặc các thành phần lồng nhau. Để tương tác với thành phần, người dùng kích hoạt các hành động như nhấn nút và thành phần đáp ứng tương tác đó bằng cách phát ra các sự kiện. Vì vậy, để nói, nó kích hoạt một sự kiện lên, theo hướng ngược lại với cách dữ liệu đó được truyền.

Những sự kiện hoặc hành động được truyền đến một thành phần cha mẹ. Thành phần cha mẹ kích hoạt một hành động khác làm thay đổi trạng thái ứng dụng toàn cầu.

4. Thành phần cao cấp

Thành phần bậc cao (hay HOC) về cơ bản là một mẫu thiết kế, còn được gọi là Mẫu trang trí. Trong ReactJS, HOC là một thành phần bao bọc một thành phần khác bằng cách thêm chức năng bổ sung hoặc các thuộc tính bổ sung. Điều này cho phép trừu tượng hóa từ một số logic thường được sử dụng và giữ cho mã của bạn DRY. Đó là cách bạn phân phối cấu trúc thành phần phức tạp giữa các thành phần khác trong ReactJS và cách để tách rời logic ứng dụng và giao diện người dùng của bạn. Chẳng hạn, bạn có thể sử dụng thành phần chứa làm HOC cho thành phần Nút trình bày của mình.

Dưới đây là một ví dụ về thành phần HOC ReactJS:

5. Thành phần container

Mặt khác, các thành phần container có logic để đặt trạng thái hoặc có các hàm để phát ra các sự kiện lên đến một thành phần cha. Nguyên tắc chung của ngón tay cái là giữ cho thành phần của bạn đơn giản nhất có thể với nguyên tắc thiết kế Nguyên tắc Trách nhiệm duy nhất, điều đó có nghĩa là thành phần của bạn phải làm một việc, nhưng làm tốt. Thông thường, các loại thành phần này là các HOC chứa ít thành phần trình bày. Các thành phần trình bày Viết các thành phần đơn giản có thể làm giảm độ phức tạp ứng dụng tổng thể của bạn. Đây là nơi các thành phần trình bày đi vào chơi. Các thành phần này nên có tối thiểu để không logic. Các thành phần trình bày chấp nhận dữ liệu và phát ra các sự kiện cho một cuộc gọi lại mà chúng nhận được như một phần của đạo cụ của nó. Về cơ bản, loại thành phần này biểu hiện UI và thực thi một chức năng được truyền vào nó khi một số hành động trong UI của nó xảy ra. Loại thành phần này là một khối xây dựng và đôi khi được gọi là Thành phần có thứ tự thấp (hoặc LỘC).

6. Danh sách thực hành tốt nhất

  • [Cập nhật ngày 22 tháng 5 năm 2019] - Khi sử dụng ReduxJS, hãy chia mã Reducer của bạn thành các phương thức nhỏ hơn để tránh JSON lớn trong Reducer của bạn.
  • Cân nhắc sử dụng TypeScript trong ứng dụng của bạn nếu bạn chưa làm điều đó.
  • Sử dụng trình tạo ứng dụng tạo phản ứng để khởi động ứng dụng ReactJS của bạn.
  • Giữ mã của bạn KHÔ. Don Patrick Lặp lại chính mình, nhưng hãy nhớ rằng mã trùng lặp KHÔNG phải lúc nào cũng là điều xấu.
  • Tránh có các lớp lớn, phương thức hoặc thành phần, bao gồm cả Giảm.
  • Sử dụng các trình quản lý mạnh hơn để quản lý trạng thái ứng dụng, chẳng hạn như Redux.
  • Sử dụng đồng bộ hóa sự kiện, chẳng hạn như Redux-Thunk, để tương tác với API mặt sau của bạn.
  • Tránh chuyển quá nhiều thuộc tính hoặc đối số. Giới hạn bản thân trong năm đạo cụ mà bạn chuyển vào thành phần của bạn.
  • Sử dụng ReactJS defaultProps và ReactJS propTypes.
  • Sử dụng kẻ nói dối, chia dòng quá dài.
  • Giữ tập tin cấu hình jslint của riêng bạn.
  • Luôn sử dụng trình quản lý phụ thuộc với tệp khóa, chẳng hạn như NPM hoặc sợi.
  • Kiểm tra mã thường được truy cập của bạn, mã phức tạp và dễ bị lỗi.
  • Viết thêm các bài kiểm tra cung cấp phạm vi kiểm tra nhiều hơn cho mã của bạn với một chút nỗ lực và mã kiểm tra để đảm bảo hoạt động đúng.
  • Mỗi khi bạn tìm thấy một lỗi, hãy chắc chắn rằng bạn viết một bài kiểm tra đầu tiên.
  • Sử dụng các thành phần dựa trên chức năng bằng cách bắt đầu sử dụng React Hook, một cách ReactJS mới để tạo các thành phần đầy đủ trạng thái.
  • Sử dụng cấu trúc lại ES6 cho đạo cụ của bạn.
  • Sử dụng kết xuất có điều kiện.
  • Người dùng `map ()` để thu thập và kết xuất các bộ sưu tập các thành phần.
  • Sử dụng các thành phần một phần, chẳng hạn như `<>` '`` `
  • Đặt tên cho các trình xử lý sự kiện của bạn bằng các tiền tố xử lý, chẳng hạn như `handleClick ()` hoặc `handleUpdate ()`.
  • Sử dụng `onChange` để kiểm soát các đầu vào của bạn, chẳng hạn như` onChange = {this.handleInputChange ()}`.
  • Sử dụng JEST để kiểm tra mã ReactJS của bạn.

Chúng tôi đã đề cập đến đồng bộ hóa sự kiện, chẳng hạn như Redux-Thunk. ReactJS v16.3 đã giới thiệu một tính năng mới gọi là React Context API. Một phần chức năng của nó là bắt chước chức năng redux-thunk và đồng bộ hóa các sự kiện với phương tiện ReactJS. Đó là một tính năng đang có nhu cầu cao, vì gần như bất kỳ ứng dụng ReactJS nào cũng nói về API back end và cần đồng bộ hóa các yêu cầu và sự kiện. Chúng tôi sẽ theo dõi API đó và sẽ cập nhật cho bạn thông tin cập nhật.

Dưới đây là một ví dụ về việc sử dụng defaultProps và propTypes:

7. Kết luận

Chúng tôi hy vọng bài viết này làm sáng tỏ các thực tiễn và mô hình tốt nhất của ReactJS rất phổ biến trong năm 2019. Ngoài ra, bạn có thể đăng ký để cập nhật miễn phí và các tài liệu học tập mới về ReactJS để nhận các bản cập nhật mới. Còn một điều nữa

Chúng tôi thực sự cần vỗ tay của bạn! Nếu bạn thấy bài viết này hữu ích, vui lòng nhấn nút bên dưới :) Đây là đầu tiên của chúng tôi cho bạn. Bạn thật tuyệt vời!

.

Tài liệu thưởng: Đây là bài viết gần đây của chúng tôi về Redux và Redux-Thunk. Chúng tôi sẽ giải thích làm thế nào hai làm việc với nhau.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188