Tìm hiểu sự khác biệt giữa React và Solid

Bài viết tìm hiểu sự khác biệt giữa React, nơi khai sinh ra JSX, và Solid.js, một thư viện phát triển từ JSX nhưng khác với React ở chỗ không sử dụng virtual DOM.

Khi giả định một lập trình viên React tiếp cận Solid.js, có thể thấy về cơ bản có những khác biệt như sau.

• Hàm hook của React chỉ có thể dùng bên trong hàm component, trong khi các hàm quản lý trạng thái của SolidJS không bị ràng buộc về nơi gọi, gần giống như một kỹ thuật quản lý trạng thái độc lập.
• Hàm side-effect useEffect của React có thể xử lý cả logic hiệu ứng phụ lẫn dọn dẹp trong cùng một hàm, đồng thời có thể chỉ định thủ công các trạng thái bị ảnh hưởng; trong khi hàm side-effect createEffect của Solid.js, giống Svelte, sẽ phản ứng với các trạng thái quản lý được khai báo trong phần thân, không nhận thủ công danh sách trạng thái bị ảnh hưởng, không cung cấp hàm trả về để cleanup, nhưng cung cấp một môi trường vòng đời quản lý trạng thái để có thể dùng hàm dọn dẹp thông qua onCleanup.
• Về quản lý phạm vi trạng thái, cách sử dụng không khác nhiều so với React.
• Với component động, điều kiện và vòng lặp, React có thể dễ dàng xử lý bằng logic JavaScript vì phần thân sẽ được viết lại khi trạng thái thay đổi; còn Solid giữ nguyên phần thân nên có thể giải quyết thông qua các component built-in mà nó cung cấp.
• Solid.js cũng cung cấp các component lazy và <Suspense> tương tự React.
• Không giống React, Solid cung cấp các hàm tiện ích quản lý trạng thái có xét đến tính phản ứng bất đồng bộ.
• Cách dùng ref trong React và Solid.js khá giống nhau, nhưng trong khi React thường dùng các hàm chuyên biệt như useRef để tham chiếu, thì ở Solid.js có thể đơn giản dùng biến let.
• Solid.js, giống Svelte, cung cấp đặc tính action use để quản lý vòng đời của vanilla JS.
• Props của React vẫn có thể dùng riêng lẻ sau khi destructuring vì phần thân sẽ được viết lại khi props thay đổi; nhưng nếu làm vậy trong Solid.js thì sẽ không phản ứng, nên không thể tận dụng props riêng lẻ thông qua destructuring. Thay vào đó cần giữ nguyên ở dạng đối tượng, hoặc tách ra bằng các hàm tiện ích hỗ trợ tách/hợp đối tượng như splitProps để vẫn sử dụng theo kiểu đối tượng.

[firea32]

Khác biệt lớn nhất là sự khác nhau giữa useState và useSignal. Tôi nhớ mình đã rất vất vả khi debug vì không thể nhìn thấy rõ dữ liệu được binding như thế nào.