Tóm tắt ngắn gọn
Bài viết này cung cấp các kỹ thuật và phương pháp giúp bạn trở thành một nhà phát triển ReactJS giỏi hơn. Các điểm chính bao gồm:
- Sử dụng Fragment thay vì div để tránh thêm các phần tử HTML phụ không cần thiết.
- Tận dụng Context để truyền dữ liệu qua component tree một cách hiệu quả.
- Triển khai Error Boundaries để xử lý lỗi trong các component con.
- Sử dụng production build để tối ưu hiệu suất ứng dụng.
- Sử dụng Refs để tương tác trực tiếp với các DOM element.
- Áp dụng code splitting để giảm thời gian tải trang.
- Sử dụng Static Type Checking (ví dụ: Flow) để phát hiện lỗi kiểu sớm.
[Sử dụng Fragment thay vì div]
Khi cần chứa nhiều components và chỉ cho phép một component trả về, việc sử dụng thẻ div có thể thêm một phần tử HTML phụ vào document. Thay vào đó, nên sử dụng React.Fragment để nhóm các phần tử lại với nhau mà không làm phá vỡ ngữ nghĩa HTML, đặc biệt khi làm việc với lists và HTML <table>.
[Sử dụng context nhiều hơn]
Context cung cấp một cách để truyền dữ liệu qua component tree mà không cần phải chuyển props xuống theo cách thủ công ở mọi cấp độ. Nếu nhiều components cần một giá trị, hãy sử dụng context. Ngược lại, nếu chỉ có một component con duy nhất cần giá trị này, hãy sử dụng compositions. Ví dụ, bạn có thể tạo một ThemeContext để chia sẻ theme giữa các components.
[Có ít nhất một Error Boundaries]
React 16 giới thiệu Error Boundaries, một tính năng cho phép bạn bao bọc lỗi của tất cả các component con. Tạo một component React và sử dụng nó như là component cha để xử lý các lỗi. Nếu có bất kỳ lỗi nào trong component con, Error Boundaries component sẽ được gọi để xử lý lỗi. Sử dụng componentDidCatch để ghi thông tin lỗi.
[Sử dụng production build trong môi trường thật]
Trang web chính thức của ReactJS liệt kê nhiều cấu hình có thể tăng performance của ứng dụng. Đừng quên kiểm tra chúng trước khi triển khai vào môi trường thật. Việc cấu hình chỉ mất khoảng 10 phút nhưng sẽ mang lại performance tuyệt vời cho ứng dụng của bạn.
[Sử dụng Refs để tương tác với các con]
Refs có thể được sử dụng để trigger các animation, text selection hoặc quản lý focus. Ví dụ, để set focus trong React, chúng ta có thể dùng Refs to DOM elements. Tạo một tham chiếu cho một element trong JSX của một component class và sau đó focus nó vào nơi khác trong component của mình khi cần.
[Sử dụng tách code]
Code splitting cho phép chia nhỏ bundle file và tạo ra nhiều kết quả outputs. Trình duyệt sẽ tải bundle thích hợp khi cần, cải thiện thời gian tải trang web. Sử dụng React.lazy và Suspense để đạt được điều này. Bạn có thể tách code theo nhiều cách khác nhau, nhưng điểm bắt đầu tốt nhất là dựa vào routes.
[Static Type Checking]
Javascript không phải là ngôn ngữ được định kiểu và nhiều vấn đề phát sinh do các kiểu chưa đúng. Sử dụng các loại checkers khác nhau có sẵn. Một tool nổi tiếng và bắt đầu dễ dàng là Flow. Nó cho phép bạn chú thích các biến, hàm, và các React components với một cú pháp kiểu đặc biệt, và bắt các lỗi sớm.
