useSignal

背景

我要监听一个视频播放当前进度时间，并把显示到页面上。

使用传统state

function DemoOne() {
  const [currentTime, setCurrentTime] = useState(0);
  const videoRef = useRef<HTMLVideoElement>(null);

  // 处理播放进度变化
  const handleTimeUpdate = () => {
    const video = videoRef.current;
    setCurrentTime(Number(video.currentTime.toFixed(2)));
  };

  console.log('DemoOne Render');

  return (
    <div>
      <video
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        controls
        ref={videoRef}
        onTimeUpdate={handleTimeUpdate}
      ></video>
      <div>当前播放时间：{currentTime} 秒</div>
    </div>
  );
}

你会发现DemoOne组件会一直被重新render，这是因为你在 handleTimeUpdate 里 更新状态了！

使用Signal

import { useRef } from 'react';
import { useSignal } from "@preact-signals/safe-react";

function DemoOne() {
  const currentTime = useSignal(0);
  const videoRef = useRef<HTMLVideoElement>(null);

  // 处理播放进度变化
  const handleTimeUpdate = () => {
    const video = videoRef.current;
    currentTime.value = Number(video.currentTime.toFixed(2));
  };

  console.log('DemoOne Render');

  return (
    <div>
      <video
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        controls
        ref={videoRef}
        onTimeUpdate={handleTimeUpdate}
      ></video>
      <div>当前播放时间：{currentTime} 秒</div>
    </div>
  );
}

这里DemoOne组件会只会被render执行一次，而且currentTime也还是响应式的！

完整集成

踩过坑：如果不完整集成signal，jsx属性无法响应signal的更新

import { useSignal } from '@preact/signals-react';

export default function Demo() {
  // 一开始为蓝色背景
  const bgc = useSignal('blue');

  // 鼠标移入为绿色背景
  function hover() {
    bgc.value = 'green';
  }

  // 鼠标移出为蓝色背景
  function unhover() {
    bgc.value = 'blue';
  }

  return (
    <button
      style={{
        color: 'white',
        backgroundColor: bgc.value,
      }}
      onMouseOver={hover}
      onMouseOut={unhover}
      data-bgc={bgc.value}
    >
      Hover Me - {bgc.value}
    </button>
  );
}

如何完整集成呢？其实官方文档给出了说明

vite

安装 npm install --D @vitejs/plugin-react-swc后，去配置 vite.config.js

// vite.config.ts
import { defineConfig } from "vite";
import reactSwc from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [
    reactSwc({
      plugins: [["@preact-signals/safe-react/swc", {}]],
    }),
  ],
});

nextjs

直接进入 next.config.js

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        "@preact-signals/safe-react/swc",
        {
          mode: "auto",
        }
      ],
    ],
  },
};

module.exports = nextConfig;

其它

这就很有意思了，一直引以为傲的 react 响应式更新机制 反而在这个例子中载了跟头！

这个时候使用 Signal 反而能如同 vue那样更颗粒化的精准更新，而非re-render整个组件(也就是说它能触发dom更新，而不必整个组件重新执行一遍)！

vue和react响应式

由此推导vue和react响应式的区别：

react任何状态的变更都会导致组件重新执行整体渲染（注意不是重新挂载，各种hooks内的代码不会执行），vue状态则只有依赖了变化数据的部分才会重新计算或渲染！

vue因为这个特性，所以使用watch或computed等来监听状态的变化来重新执行某些js代码逻辑。

react因为这个特性，发明了useEffect、useMemo、useCallBack等hook，来守住不用重新执行的某些js代码逻辑。

但也并不是说vue永远不会被整个reRender，比如组件被重新挂载（比如加key）or 手动调用 forceUpdate就会！

监听

若组件不会因signal的变化而整体重新执行，

那在组件非dom部分的js中，

如何监听signal的变化呢（类似于vue的watch）？

当然有 effect ！

import { useRef } from 'react';
import { effect, useSignal } from "@preact-signals/safe-react";

function DemoOne() {
  const currentTime = useSignal(0);
  const videoRef = useRef<HTMLVideoElement>(null);

  // 处理播放进度变化
  const handleTimeUpdate = () => {
    const video = videoRef.current;
    currentTime.value = Number(video.currentTime.toFixed(2));
  };

  effect(() => {
    console.log("currentTime 变化了：", currentTime.value);
    console.log('DemoOne again Render');
  });

  console.log('DemoOne first Render');

  return (
    <div>
      <video
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        controls
        ref={videoRef}
        onTimeUpdate={handleTimeUpdate}
      ></video>
      <div>当前播放时间：{currentTime} 秒</div>
    </div>
  );
}

计算属性

当然它也有了计算属性

import { useSignal, useComputed } from "@preact/signals-react";
import { useRef } from "react";

export default function VideoPlayer() {
  const currentTime = useSignal(0);
  const videoRef = useRef<HTMLVideoElement>(null);

  const handleTimeUpdate = () => {
    if (videoRef.current) {
      currentTime.value = videoRef.current.currentTime;
    }
  };

  const formattedTime = useComputed(() => currentTime.value.toFixed(2)); 

  return (
    <div>
      <video
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        controls
        ref={videoRef}
        onTimeUpdate={handleTimeUpdate}
      />
      <div>当前播放时间：{formattedTime} </div>
      {/* <div>当前播放时间：{currentTime.value.toFixed(2)} </div>   要求完整集Signal，否则这样无效，不会响应式更新 */}
    </div>
  );
}

两个版本

如下可以看到，有两种倒入方式，意思有两个库可以使用。

@preact/signals-react	官方 Preact Signals 的 React 适配	更轻量，但可能需要额外配置
@preact-signals/safe-react	社区维护的兼容版本	更稳定，对 React 18+ 优化

优先使用官方版本！

import { useSignal } from '@preact/signals-react';
import { useSignal } from '@preact-signals/safe-react';

自动解包

我发现{count.value} 和 {count} 有时候都能触发响应式更新，这是因为你配置了自解包，以及有些版本默认自动解包

存在坑

自动解包在nextjs上，会存在一个坑，就是html属性如果用到 signals的状态，会无效，两种解决方案：

1. 不依赖自动解包，手动去做，比如 style={{width: widthSignal.value+'px'}}（反正当前组件或者父组件内必须有地方手动结构过 比如在模板 {widthSignal.value} 或者在js中使用 widthSignal.value，然后本组件内你再style={{width: widthSignal+'px'}}也可以解决问题）
2. 强制订阅更新

// 强制订阅 signal 变化
  useEffect(() => {
    if (widthSignal) {
      // 确保 signal 被订阅
      const unsubscribe = widthSignal.subscribe?.(() => {
        // 这里可以添加调试日志
        console.log( "Controls: widthSignal changed", widthSignal.value);
      });
      return unsubscribe;
    }
  }, [widthSignal]);

所以最终的建议是，如果如果用到了content上，则可以依赖自动解构，如果用在了模板的attr上则尽量自己手动解构！