React cho đến nay là framework Javascript frontend lớn nhất trong phát triển web hiện đại. Mặc dù vậy, Svelte đã ngày càng trở nên phổ biến trong vài năm qua. Điều gì làm cho Svelte trở nên đặc biệt.

• Cú pháp rất dễ học
• Thay vì vận chuyển khuôn khổ đến trình duyệt, mã được biên dịch theo js tiêu chuẩn, dẫn đến kích thước gói nhỏ hơn NHIỀU và mã nhanh như chớp.

SolidJS là một khung giao diện người dùng giao diện người dùng có cú pháp rất giống với React nhưng được biên dịch sang javascript hiện đại như Svelte cho phép mọi người có được tốc độ và kích thước gói của Svelte nhưng sử dụng cú pháp React mà họ đã quen.

Thiết lập một dự án SolidJS

Chỉ cần chạy lệnh sau để tạo một dự án mới…

npm init solid app ProjectName

hoặc để đánh chữ

npm init solid app-ts ProjectName

Những gì giống nhau

• Cấu trúc tệp của dự án đã tạo sẽ giống như một ứng dụng tạo phản ứng
• JSX vẫn hoạt động như JSX

Vì vậy, trong React, thông thường bạn sẽ sử dụng hook useState để tạo một biến trạng thái và quá trình này vẫn hoạt động khá giống trong SolidJS ngoại trừ bây giờ chúng ta sử dụng hàm createSignal.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Vòng đời và tạo

Đây là nơi Tư duy trong Solid rất khác với Tư duy trong React. Trong React, toàn bộ thành phần là một hàm chạy lại mỗi khi bạn cập nhật trạng thái, tạo ra các vòng lặp vô hạn khi thay đổi trạng thái trên các lệnh gọi hàm trong thân hàm của thành phần. Trong React, giải pháp cho việc này là chuyển loại mã này vào dạng đóng của riêng nó với hook useEffect để chạy khi không muốn trên mỗi lần hiển thị của hàm component.

Solid không sử dụng DOM ảo và khi cập nhật trạng thái, nó không chạy lại chức năng thành phần. Thay vào đó, mã Reactive được bao bọc trong các lệnh gọi createEffect, sau đó chạy lại chức năng khi bất kỳ tín hiệu nào bên trong chúng được cập nhật. Lợi ích của việc này là…

• Bạn có thể thực hiện các cuộc gọi Tìm nạp / Axios mà không cần phải sử dụng chúng
• JSX sẽ tự động biên dịch thành các cuộc gọi createEffect, đó là lý do tại sao chúng sẽ cập nhật khi trạng thái cập nhật.

Điều tốt đẹp về điều này là các bản cập nhật chi tiết hơn khiến nhu cầu về chi phí của một dom ảo là không cần thiết (chỉ mã phụ thuộc vào dữ liệu được cập nhật sẽ thay đổi mà không cần phải chạy bất kỳ so sánh nào).

Kết luận

Solid giữ lại những gì tuyệt vời về Cú pháp React nhưng cũng sử dụng các phương pháp nâng cao hiệu suất của Svelte. Tôi sẽ không ngạc nhiên khi thấy SolidJS phát triển trong cùng một mạch các Framework như Svelte và React!