5 HIỂU LẦM VỀ REACTJS BẠN CẦN BIẾT

24-12-2018 23:22

Ngày nay, ReactJS đã trở nên rất phổ biến bởi những tính năng linh hoạt và đơn giản với hơn 1,300 developer và hơn 94,000 trang web đang sử dụng ReactJS. Nhiều người ám chỉ rằng ReactJS sẽ là tương lai của việc phát triển web. Tuy vậy, vẫn còn có những lầm tưởng về ReactJS khiến chúng ta phải bối rối khi tiếp xúc với ReactJS nếu không tìm hiểu trước. Trong bài viết này, ITPlus Academy sẽ chỉ ra những hiểu lầm đó.

Trong lĩnh vực phát triển công nghệ, các chủ doanh nghiệp và developer luôn tìm kiếm những phương pháp tốt nhất để giúp doanh nghiệp của họ có những lợi thế cạnh tranh tốt hơn. Và một trong những công nghệ tốt nhất có thể giúp những doanh nghiệp vượt mặt đối thủ trong việc tạo ra những ứng dụng web chính là ReactJS.

ReactJS cho phép các doanh nghiệp tạo ra những ứng dụng web với UI tốt hơn để nâng cao trải nghiệm người dùng. Đây cũng chính là công nghệ mà các doanh nghiệp cần để có được lượng tương tác của người dùng, tỉ lệ click cũng như chuyển đổi cao hơn. Hơn thế, các doanh nghiệp sử dụng ReactJS được đảm bảo có giao diện tốt hơn so với những doanh nghiệp sử dụng các framework khác bởi ReactJS giúp ngăn chặn việc cập nhật của DOM giúp ứng dụng nhanh hơn và truyền tải tốt hơn UX.

Những hiểu lầm về ReactJS mà các developer có thể mắc phải bao gôm:

ReactJS là một framework

Có một sự lầm tưởng nhẹ là ReactJS như một framework, hỗ trợ đầy đủ các tính năng cho một web app như là những tính năng của Angular, Ember, …

Mặc dù ReactJS thường được dùng để mô ta toàn bộ các thành phần để phát triển web trong hệ sinh thái của nó, nhưng phần cốt lõi của nó chỉ qua tâm tới phần View. Điều này giúp cho các View Layer được xử lý một cách nhẹ nhàng, dễ dàng trong một web app.

Hầu hết framework đều đề xuất những structure cho một dự án, nhưng với ReactJS thì không. Nó rất mềm dẻo và dễ chia module, điều này giúp nó dễ đáp ứng nhiều nhu cầu của một dự án hơn.

Một developer cũng rất dề dàng tiếp cận và học ReactJS trong một ngày để có thể hiểu cách viết các components của ReactJS. Điều này không đúng cho một framework như Angular, Ember,

JSX sẽ bị bắt buộc dùng trong ReactJS

Lần đầu tiên, JSX được công bố bởi Facebook như là một cách để định nghĩa UI cho ứng dụng. Cú pháp của nó trông giống như HTML nhưng được tận dụng sức mạnh của javascript trong đó, để dễ dàng khai báo một component hơn.

Một số người không hài lòng với cách ReactJS nhúng những thứ như HTML vào javascript code. Điều đó dường như đang vi phạm quy tắc về phân chia trong code. Nhưng thực chất JSX không phải là HTML, nó là javascript code bởi vì nó có thể được chuyển qua code javascript bằng các transpilers như Babel.

Trong mọi trường hợp thì JSX không phải là lựa chọn duy nhất trong ReactJS. Bạn có thể chọn một ngôn ngữ template bất kỳ như ReactJS Templates hoặc đơn giản là dùng API ReactJS.createElement() trực tiếp. Bởi vì JSX thực chất là cách viết khác của ReactJS.createElement().

ReactJS nhanh hơn DOM

Bên dưới bộ máy của ReactJS, chúng ta thường nghe tới “Virtual DOM”, nó là một cây Javascript Object để mô phỏng một cây DOM thực sự của trình duyệt.

Đó là lý do tại sao khi sử dụng ReactJS, chúng ta không thao tác trực tiếp với DOM, giống như Jquery từng làm. Thay vào đó, bạn sẽ nói cho ReactJS biết bạn muốn cập nhật DOM nào thông qua các State Object, ReactJS sẽ làm việc đó thay bạn.

Điều đó tạo nên một mô hình rõ ràng cho các lập trình viên. Bởi vì bạn không cần phải theo dõi tất cả các DOM State. Thay vào đó, bạn chỉ cần thay đổi các State Object, sau đó ReactJS sẽ sử dụng một thuật toán phân tích sự khác nhau(diffing algorithms) thông minh để biết phần UI nào thay đổi so với DOM trước đó, sau đó mới tiến hành cập nhật DOM trên trình duyệt.

Lợi ích lớn lao của Virtual DOM là cung cấp một API để tạo UI, làm hạn chế tối đa việc thay đổi DOM trên trình duyệt. Vì thế nó không thể nhanh hơn thao tác DOM thông thường được. Ví dụ một thao tác thay đổi như thêm một Class vào DOM khi sử dụng javascript thuần lúc nào cũng nhanh hơn sử dụng className trong ReactJS.

Đó là vì, theo như định nghĩa, ReactJS phải làm thêm nhiều việc hơn như là chạy một giải thuật tìm ra những phần nào cần được cập nhật. Cho nên, mặc dù Virtual giúp chúng ta nhiều thứ, nhưng về bản chất chúng vẫn làm nhiều việc hơn thao tác DOM thông thường.

Nếu bạn cập nhật DOM bằng chính Javascript thuần thì không có gì có thể đánh bại bạn, trừ phi bạn cập nhật quá nhiều DOM hơn bạn muốn.

ReactJS thì rất phức tạp để cài đặt.

ReactJS app đã từng là một ác mộng khi setup trong quá khứ. Bạn cần phải làm rất nhiều việc để init một app. Nó yêu cầu nhiều bước biên dich và cấu hình cho các tools như Webpack, Browserify, Gulp, Babel, … rất nhiều bước tẻ nhạt nữa.

Tuy nhiên, kể từ khi Create ReactJS App được công bố bởi Reat team, điều đó đã trở nên dễ dàng.

Bạn có thể cài đặt dễ dàng bằng lệnh: npm install -g create-ReactJS-app và create-ReactJS-app HelloReactJSApp. Sau đó, bạn npm start sẽ mở được app với http://localhost:3000.

Nếu trong quá trình phát triển app, những cấu hình tự động của create-ReactJS-app không đáp ứng nhu cầu của bạn, bạn có thể dễ dàng tùy chỉnh bằng lệnh npm run eject, tất cả những file cấu hình và dependencies sẽ được show ra cho bạn cấu hình dễ dàng.

Bạn phải sử dụng inline style với ReactJS

ReactJS khuyến khích mọi người tập trung html, logic, style cho một component ở cùng một file. Bởi vì bạn sẽ không có một component khép kín(self-contained) nếu bạn định nghĩa rời rạc các thành phần của nó. Chính vì lý do đó nên ReactJS đề nghị inline style trong component.

Hiện nay có rất nhiều khóa học lập trình dành cho người mới bắt đầu với chi phí rất rẻ nhưng mang lại hiệu quả tốt. Tham khảo một số khóa học: