SolidJS 是近年来前端开发领域的一颗新星，它结合了 React 的思维模式和 Vue 的性能优势，提供了一种高效且轻量的框架解决方案。

实战项目示例：实时搜索框

接下来，我们用 SolidJS 实现一个支持实时搜索的 UI。

import { createSignal } from 'solid-js';function Counter() {  const [count, setCount] = createSignal(0);  return (    <div>      <h1>Count: </h1>      <button onClick={() => setCount(count() + 1)}>Increase</button>    </div>  );}export default Counter;

• createSignal：创建可变状态，类似于 React 的 useState。直观的 API 和现代化设计，已经成为前端开发领域中的重要选择。

• 细粒度更新：仅修改状态所影响的部分 DOM。

  import { createSignal } from 'solid-js';function SearchBox() {  const [query, setQuery] = createSignal('');  const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];  const filteredItems = () =>    items.filter((item) => item.toLowerCase().includes(query().toLowerCase()));  return (    <div>      <input        type="text"        value={query()}        onInput={(e) => setQuery(e.currentTarget.value)}        placeholder="Search..."      />      <ul>        {filteredItems().map((item) => (          <li>{item}</li>        ))}      </ul>    </div>  );}export default SearchBox;

  ---

  高级代码示例

  1. 自定义 Hook

  import { createSignal } from 'solid-js';function useCounter(initialValue = 0) {  const [count, setCount] = createSignal(initialValue);  return { count, increment: () => setCount(count() + 1), decrement: () => setCount(count() - 1) };}function App() {  const { count, increment, decrement } = useCounter(10);  return (    <div>      <h1>Count: </h1>      <button onClick={increment}>Increase</button>      <button onClick={decrement}>Decrease</button>    </div>  );}export default App;

  2. 异步数据加载

  import { createResource } from 'solid-js';const fetchData = async () => {  const res = await fetch('https://jsonplaceholder.typicode.com/posts');  return res.json();};function DataFetcher() {  const [data] = createResource(fetchData);  return (    <div>      <h1>Posts</h1>      {data.loading && <p>Loading...</p>}      {data() && (        <ul>          {data().map((post) => (            <li key={post.id}>{post.title}</li>          ))}        </ul>      )}    </div>  );}export default DataFetcher;

  3. 动态路由

  import { Router, Routes, Route } from 'solid-app-router';function Home() {  return <h1>Home Page</h1>;}function About() {  return <h1>About Page</h1>;}function App() {  return (    <Router>      <Routes>        <Route path="/" component={Home} />        <Route path="/about" component={About} />      </Routes>    </Router>  );}export default App;

  4. 模态框组件

  import { createSignal } from 'solid-js';function Modal({ isOpen, onClose }) {  return (    isOpen() && (      <div class="modal">        <div class="modal-content">          <span class="close" onClick={onClose}>&times;</span>          <p>This is a modal!</p>        </div>      </div>    )  );}function App() {  const [isOpen, setIsOpen] = createSignal(false);  return (    <div>      <button onClick={() => setIsOpen(true)}>Open Modal</button>      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />    </div>  );}export default App;

  5. 表单处理

  import { createSignal } from 'solid-js';function Form() {  const [formData, setFormData] = createSignal({ name: '', email: '' });  const handleSubmit = (e) => {    e.preventDefault();    console.log(formData());  };  return (    <form onSubmit={handleSubmit}>      <input        type="text"        value={formData().name}        onInput={(e) => setFormData({ ...formData(), name: e.currentTarget.value })}        placeholder="Name"      />      <input        type="email"        value={formData().email}        onInput={(e) => setFormData({ ...formData(), email: e.currentTarget.value })}        placeholder="Email"      />      <button type="submit">Submit</button>    </form>  );}export default Form;

  ---

  SolidJS 与其他框架的性能对比

  框架	包大小 (kb)	初次渲染时间 (ms)	更新性能
  React	42	80	中等
  Vue	20	50	快
  SolidJS	3	35	非常快

  • 在基准测试中，SolidJS 的性能表现远超 React 和 Vue，尤其在大量节点更新的场景中。