React + Redux - Thực tiễn tốt nhất

Bài viết này chủ yếu tập trung vào việc thực hiện một số thực tiễn tốt mà tôi tuân theo khi xây dựng các ứng dụng quy mô lớn với React và Redux.

Phân biệt các thành phần trình bày và các thành phần container.

Khi chúng ta đang kiến ​​trúc một ứng dụng phản ứng với redux, chúng ta nên chia các thành phần của chúng ta thành các thành phần trình bày và container.

Các thành phần trình bày là các thành phần hiển thị HTML. Tất cả các thành phần trình bày của chúng tôi là các thành phần không trạng thái, do đó được viết dưới dạng các thành phần không trạng thái chức năng trừ khi chúng cần các móc trạng thái và vòng đời. Các thành phần trình bày sẽ không tương tác với cửa hàng redux cho nhà nước. Họ nhận dữ liệu qua các đạo cụ và kết xuất nó.

Các thành phần container là để lấy dữ liệu từ lưu trữ redux và cung cấp dữ liệu cho các thành phần trình bày. Họ có xu hướng nhà nước.

Thành phần trình bày nên là thành phần chức năng không trạng thái như được hiển thị:

Thành phần Container phải là thành phần chức năng trạng thái cho đến khi bạn buộc phải sử dụng các phương pháp vòng đời thành phần React.

Những điểm cần lưu ý:

  • Chúng ta có thể thấy hiệu suất được cải thiện khi sử dụng các thành phần chức năng không trạng thái. Các thành phần này tránh các kiểm tra và phân bổ bộ nhớ không cần thiết và do đó hiệu suất cao hơn.
  • Sẽ dễ dàng kiểm tra một thành phần, nếu bạn viết thành phần đó đơn giản nhất có thể bằng cách tách các thành phần trình bày và các thành phần chứa.
Sử dụng bindActionCreators để gửi hành động

Hệ thống điều phối sự kiện Redux là trung tâm của chức năng quản lý nhà nước. Tuy nhiên, có thể tẻ nhạt khi chuyển xuống chức năng điều phối như một chỗ dựa cho mọi thành phần cần gửi một hành động.

Tránh điều này.

Tránh điều này.

Thay vào đó hãy làm điều này.

Trong đoạn mã trên, bộ lọcTalentPoolDataBySkills trong bindActionCreators có sẵn như this.props.filterTalentPoolDataBySkills để gửi hành động của bạn. Nó sẽ làm cho nó dễ dàng hơn để duy trì mã trong thời gian dài.

Cố gắng tránh sử dụng hook setState và vòng đời thành phần khi sử dụng Redux:

Quản lý trạng thái ứng dụng bằng cách sử dụng cửa hàng redux khi nó ở trạng thái toàn cầu. Cố gắng tránh sử dụng setState trong thành phần của bạn khi bạn đang sử dụng các thư viện quản lý nhà nước như redux. Sử dụng trạng thái thành phần khi nó có nghĩa là. Một thành phần Nút hiển thị một chú giải công cụ khi được di chuột sẽ không sử dụng Redux.

Tránh làm điều này.

Thay vào đó hãy làm điều này.

Ở đây chúng tôi đã sử dụng cửa hàng redux để lấy trạng thái và hiển thị nó trong chế độ xem trực tiếp. Không cần sử dụng lại hookState và vòng đời thành phần. Redux có mặt để làm công việc quản lý nhà nước cho bạn.

Sử dụng .bind () theo cách tốt nhất:

Có hai cách ràng buộc thành phần tùy chỉnh trong phạm vi này.

  1. Liên kết chúng trong constructor.

Với cách này, chỉ có một chức năng bổ sung được tạo tại thời điểm tạo thành phần và chức năng đó được sử dụng ngay cả khi kết xuất được thực hiện lại.

2. Liên kết tại thời điểm vượt qua như giá trị prop.

Phương thức .bind () tạo ra một hàm mới mỗi khi nó chạy, phương thức này sẽ dẫn đến một hàm mới được tạo mỗi khi hàm render thực thi. Điều này có một số ý nghĩa hiệu suất. Trong các ứng dụng nhỏ, chúng ta không thể chú ý đến chúng, trong khi như trong các ứng dụng lớn, chúng ta có thể nhận thấy chúng. Vì vậy, nó không có khả năng ràng buộc một chức năng tại thời điểm chuyển qua như một giá trị prop.

Giải pháp:

  1. Nó tốt hơn để liên kết các chức năng tùy chỉnh của bạn trong constructor.
  2. Có một plugin Babel được gọi là chuyển đổi thuộc tính Class. Bạn có thể viết hàm tự động ràng buộc bằng cú pháp mũi tên béo.

Nếu chúng ta thấy đoạn mã trên thì không có chức năng nào để ràng buộc.

Sử dụng các hàm truy cập

Để tái cấu trúc mã tốt hơn, hãy chuyển tất cả các chức năng của bạn để lọc, phân tích cú pháp và các logic chuyển đổi dữ liệu khác vào tệp riêng biệt và nhập chúng để sử dụng các hàm đó trong phương thức kết nối phản ứng của bạn như được hiển thị.

Bằng cách này, sẽ dễ dàng thêm các kiểu luồng cho các chức năng của bạn.

Viết mã sạch hơn bằng tính năng ES6

Viết mã sạch hơn sẽ giúp cuộc sống của các nhà phát triển dễ hiểu và duy trì mã. Các tính năng ES6 sẽ cho chúng ta cách viết mã sạch hơn trong React.

Sử dụng các thuộc tính Hủy cấu trúc & trải rộng:

Tránh điều này.

Thay vào đó hãy làm điều này.

Sử dụng các chức năng Mũi tên:

Tránh điều này:

Thay vào đó hãy làm điều này.

Sử dụng các loại lưu lượng

Một điều chắc chắn là việc kiểm tra kiểu dự kiến ​​sẽ là tương lai của JS. Nói chung, nhiều nhà phát triển có sự nhầm lẫn giữa những gì cần thực hiện giữa luồng và bản thảo và mức độ có thể tích hợp chúng vào một dự án hiện tại.

Bản mô tả phức tạp hơn để tích hợp vào dự án hiện tại và dòng chảy cảm thấy đơn giản để giới thiệu, thừa nhận với một cảnh báo rằng nó có thể đang kiểm tra ít mã hóa của bạn như mong đợi.

Khi dự án javascript phát triển mà không cần gõ, việc tái cấu trúc sẽ càng khó khăn hơn. Dự án càng lớn thì rủi ro càng cao khi tái cấu trúc. Sử dụng kiểm tra loại có thể không hoàn toàn loại bỏ rủi ro nhưng nó sẽ làm giảm đáng kể nó.

Lợi ích trong việc sử dụng dòng chảy:

  1. Về thời gian phát hiện lỗi hoặc lỗi.
  2. Truyền đạt mục đích của chức năng.
  3. Nó giảm quy mô xử lý lỗi phức tạp.
  4. Xóa sạch các loại lỗi thời gian chạy.
Sử dụng thư viện axios cho các yêu cầu http qua jQuery ajax:

Tìm nạp API và axios là những cách thích hợp nhất để thực hiện các yêu cầu http. Giữa hai cái đó có một số lợi thế của việc sử dụng thư viện axios. họ đang

  • Nó cho phép thực hiện các biến đổi trên dữ liệu trước khi yêu cầu được thực hiện hoặc sau khi nhận được phản hồi.
  • Nó cho phép bạn thay đổi hoàn toàn yêu cầu hoặc phản hồi (tiêu đề là tốt). cũng thực hiện các hoạt động không đồng bộ trước khi yêu cầu được thực hiện hoặc trước khi Promise giải quyết.
  • Tích hợp bảo vệ XSRF.
Sử dụng các thành phần theo kiểu để tạo kiểu cho các thành phần của bạn

Ý tưởng cơ bản của các thành phần theo kiểu là để thực thi các thực tiễn tốt nhất bằng cách loại bỏ ánh xạ giữa các kiểu và các thành phần. Bằng cách này, bạn có thể sắp xếp các thành phần của mình với các kiểu tương ứng của chúng - dẫn đến các tên lớp được bản địa hóa không gây ô nhiễm không gian tên css toàn cầu.

Nếu bạn quyết định sử dụng các thành phần theo kiểu, đừng quên cài đặt plugin để hỗ trợ tô sáng cú pháp trong chuỗi hoặc có thể giúp tạo một thành phần mới.

Thí dụ:

Kiểm tra các thành phần React của bạn

Mục tiêu của kiểm thử đơn vị là tách riêng từng phần của chương trình và kiểm tra xem các phần riêng lẻ có hoạt động chính xác không. Nó cô lập phần nhỏ nhất của phần mềm có thể kiểm tra được từ phần còn lại của mã và xác định xem phần mềm có hoạt động chính xác như bạn mong đợi hay không. Chúng ta có thể tìm thấy lỗi trong giai đoạn đầu.

Trong React để kiểm tra thành phần, chúng tôi sử dụng Jest và Enzyme. Jest được tạo bởi Facebook và là một khung thử nghiệm để kiểm tra mã javascript và React. Cùng với Airbnb sườn Enzyme, một tiện ích thử nghiệm, làm cho nó phù hợp hoàn hảo để dễ dàng kiểm tra ứng dụng React của bạn.

Sử dụng ES Lint cho các quy ước mã hóa tốt hơn.

Các dự án chạy tốt có các quy ước mã hóa nhất quán rõ ràng, với việc thực thi tự động. Bên cạnh việc kiểm tra kiểu, linters cũng là công cụ tuyệt vời để tìm các lớp lỗi nhất định, chẳng hạn như những lỗi liên quan đến phạm vi biến. Việc gán cho các biến không được khai báo và sử dụng các biến không xác định là các ví dụ về các lỗi có thể phát hiện được trong thời gian ngắn.

Đối với các quy tắc linting cụ thể của React, hãy sử dụng eslint-plugin-Reac.

Đối với các quy tắc loại luồng linting đi với lỗi eslint-plugin-Flowtype và eslint-plugin-Flowtype-error.