React เป็นเฟรมเวิร์ก Javascript ส่วนหน้าที่ใหญ่ที่สุดในการพัฒนาเว็บสมัยใหม่ แม้ว่า Svelte จะได้รับความนิยมเพิ่มขึ้นอย่างต่อเนื่องในช่วงไม่กี่ปีที่ผ่านมา สิ่งที่ทำให้ Svelte พิเศษมาก

• ง่ายมากในการเรียนรู้ไวยากรณ์
• แทนที่จะส่งเฟรมเวิร์กไปยังเบราว์เซอร์โค้ดจะถูกคอมไพล์เป็น js มาตรฐานส่งผลให้ขนาดบันเดิลเล็กลงมากและโค้ดที่รวดเร็วอย่างเห็นได้ชัด

SolidJS เป็นเฟรมเวิร์ก UI ส่วนหน้าซึ่งมีไวยากรณ์คล้ายกับ React มาก แต่ถูกคอมไพล์เป็นจาวาสคริปต์สมัยใหม่เช่น Svelte ช่วยให้ผู้คนได้รับความเร็วและขนาดกลุ่มของ Svelte แต่ใช้ไวยากรณ์ React ที่พวกเขาคุ้นเคย

การตั้งค่าโครงการ SolidJS

เพียงเรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการใหม่ ...

npm init solid app ProjectName

หรือสำหรับ typescript

npm init solid app-ts ProjectName

มีอะไรเหมือนกัน

• โครงสร้างไฟล์ของโปรเจ็กต์ที่สร้างขึ้นควรให้ความรู้สึกเหมือนแอป create-react-app
• JSX ยังคงทำงานเหมือน JSX

ดังนั้นใน React โดยปกติคุณจะใช้ useState hook เพื่อสร้างตัวแปรสถานะและกระบวนการยังคงทำงานเหมือนเดิมใน SolidJS ยกเว้นตอนนี้เราใช้ฟังก์ชัน 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;

วงจรชีวิตและ createEffect

นี่คือจุดที่ Thinking in Solid มีความแตกต่างกันมากในการคิดใน React ใน React ส่วนประกอบทั้งหมดเป็นฟังก์ชันที่รันซ้ำทุกครั้งที่คุณระบุการอัปเดตทำให้ลูปไม่มีที่สิ้นสุดเป็นไปได้เมื่อเปลี่ยนสถานะของการเรียกใช้ฟังก์ชันในเนื้อหาฟังก์ชันของส่วนประกอบ ใน React วิธีแก้ปัญหานี้คือการย้ายโค้ดประเภทนี้ไปเป็นการปิดของตัวเองโดยใช้ hook useEffect เพื่อเรียกใช้เมื่อต้องการไม่ใช่ในทุก ๆ การเรนเดอร์ของฟังก์ชันคอมโพเนนต์

Solid ไม่ใช้ DOM เสมือนและในการอัปเดตสถานะจะไม่เรียกใช้ฟังก์ชันคอมโพเนนต์อีก รหัสปฏิกิริยาจะถูกรวมไว้ในการเรียก createEffect ซึ่งจะเรียกใช้ฟังก์ชันอีกครั้งเมื่อมีการอัปเดตสัญญาณใด ๆ ภายใน ประโยชน์ของสิ่งนี้คือ ...

• คุณสามารถทำการเรียก Fetch / Axios ได้โดยไม่ต้องใช้ useEffect เพื่อหลีกเลี่ยงการวนซ้ำ
• JSX โดยอัตโนมัติจะรวบรวมเป็นการเรียก createEffect ซึ่งเป็นสาเหตุที่พวกเขาจะอัปเดตเมื่ออัพเดตสถานะ

สิ่งที่ดีเกี่ยวกับเรื่องนี้คือการอัปเดตมีความละเอียดมากขึ้นทำให้ไม่จำเป็นต้องเสียค่าใช้จ่ายของ virtual dom (เฉพาะรหัสที่ขึ้นอยู่กับข้อมูลที่อัปเดตเท่านั้นที่จะเปลี่ยนแปลงโดยไม่ต้องเรียกใช้การเปรียบเทียบใด ๆ )

บรรทัดล่าง

Solid ยังคงรักษาสิ่งที่ยอดเยี่ยมเกี่ยวกับ React Syntax ไว้ แต่ยังใช้ประโยชน์จากวิธีการเพิ่มประสิทธิภาพของ Svelte ฉันไม่ต้องแปลกใจเลยที่เห็น SolidJS เติบโตในเส้นเลือดเดียวกันของ Frameworks เช่น Svelte และ React!