React 中使用 Vue3.6 Vapor 同款 Signal 是一种什么体验?🚀🚀🚀

React Signals 是一个轻量级的状态管理库,它提供了一种简单而强大的方式来管理 React 应用中的状态。它的 API 设计受到了 SolidJS 的启发,使用起来非常直观。

该架构和被合入vue3.6 vapor分支的alien-signals 是一样的!

地址:github.com/hunghg255/r...

文章同步在公众号:萌萌哒草头将军!

基础用法

1. 创建信号 (createSignal)

typescript 复制代码
import { createSignal } from "reactjs-signal";

// 创建一个初始值为 0 的信号
export const count = createSignal(0);

2. 在组件中使用信号

有三种主要方式可以在组件中使用信号:

2.1 使用 useSignal(获取值和设置器)

typescript 复制代码
import { useSignal } from "reactjs-signal";
import { count } from "../signals/counter";

export const Counter = () => {
  const [value, setValue] = useSignal(count);

  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={() => setValue((v) => v + 1)}>Increment</button>
    </div>
  );
};

2.2 使用 useSignalValue(仅获取值)

typescript 复制代码
import { useSignalValue } from "reactjs-signal";
import { count } from "../signals/counter";

export const Display = () => {
  const value = useSignalValue(count);

  return <div>Current count: {value}</div>;
};

2.3 使用 useSetSignal(仅获取设置器)

typescript 复制代码
import { useSetSignal } from "reactjs-signal";
import { count } from "../signals/counter";

export const Controls = () => {
  const setCount = useSetSignal(count);

  return (
    <div>
      <button onClick={() => setCount((v) => v + 1)}>+1</button>
      <button onClick={() => setCount((v) => v - 1)}>-1</button>
    </div>
  );
};

3. 计算信号 (createComputed)

计算信号允许你基于其他信号创建派生状态:

typescript 复制代码
import { createSignal, createComputed } from "reactjs-signal";

const count = createSignal(0);
const doubleCount = createComputed(() => count() * 2);
const isEven = createComputed(() => count() % 2 === 0);

4. 信号效果 (useSignalEffect)

使用 useSignalEffect 可以在信号值变化时执行副作用:

typescript 复制代码
import { useSignalEffect } from "reactjs-signal";
import { count } from "../signals/counter";

export const Logger = () => {
  useSignalEffect(() => {
    console.log("Count changed:", count());
  });

  return null;
};

5. 服务端渲染支持 (useHydrateSignal)

如果你需要在服务端渲染时初始化信号值:

typescript 复制代码
import { useHydrateSignal } from "reactjs-signal";
import { count } from "../signals/counter";

export const App = () => {
  // 在组件挂载时将 count 信号的值设置为 10
  useHydrateSignal(count, 10);

  return <div>...</div>;
};

一点点心得

  • 使用 useSignalValue 当只需要读取值时
  • 使用 useSetSignal 当只需要更新值时
  • 适当使用 createComputed 来缓存计算结果

实践:todo 应用

typescript 复制代码
import { createSignal, createComputed } from "reactjs-signal";

export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export const todos = createSignal<Todo[]>([]);
export const filter = createSignal<"all" | "active" | "completed">("all");

export const filteredTodos = createComputed(() => {
  const currentFilter = filter();
  const currentTodos = todos();

  switch (currentFilter) {
    case "active":
      return currentTodos.filter((todo) => !todo.completed);
    case "completed":
      return currentTodos.filter((todo) => todo.completed);
    default:
      return currentTodos;
  }
});
typescript 复制代码
import { useSignal, useSignalValue } from "reactjs-signal";
import { todos, filter, filteredTodos } from "../signals/todos";

export const TodoApp = () => {
  const [, setTodos] = useSignal(todos);
  const [currentFilter, setFilter] = useSignal(filter);
  const visibleTodos = useSignalValue(filteredTodos);

  const addTodo = (text: string) => {
    setTodos((prev) => [
      ...prev,
      {
        id: Date.now(),
        text,
        completed: false,
      },
    ]);
  };

  return (
    <div>
      <input
        type="text"
        onKeyPress={(e) => {
          if (e.key === "Enter") {
            addTodo(e.currentTarget.value);
            e.currentTarget.value = "";
          }
        }}
      />
      <ul>
        {visibleTodos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <div>
        <button onClick={() => setFilter("all")}>All</button>
        <button onClick={() => setFilter("active")}>Active</button>
        <button onClick={() => setFilter("completed")}>Completed</button>
      </div>
    </div>
  );
};

记住,信号的主要优势在于其简单性和响应式特性,这使得状态管理变得更加直观和高效。

最后

今天的分享就到这里了,如果文章中有问题,欢迎指正!

如果对你有帮助,记得关注我

相关推荐
鱼樱前端14 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手2 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范