signals-react中effect和useSignalEffect的区别

Question

这个问题不是问题，只是为了教育目的。

我正在react应用程序中尝试来自@preact/signals-react的effect和useSignalEffect。 问题是我看到 Effect 和 useSignalEffect 具有相同的行为，它们在订阅的信号更改时都会运行。 谁能澄清一下它们之间有什么区别。

我使用的例子：-

import React from 'react'
import {effect,  useSignal,useSignalEffect } from '@preact/signals-react'


export default function ComputedSignalExample() {
    const count = useSignal(0);

    useSignalEffect(() => {
      console.log(`From useSignalEffect: ${count}`); 
    });

    effect(() => {
        console.log(`From Effect: ${count}`); 
    });
  
    return (
      <div>
        <p>The current count is: {count}</p>
        <button onClick={() => count.value++}>Increment</button>
      </div>
    );
  }

From Effect: 0 From useSignalEffect: 0 From Effect: 1 From useSignalEffect: 1 From Effect: 2 From useSignalEffect: 2

我将 useSignalEffect 与依赖项数组一起使用，以查看它是否可能具有与 useEffect React hook 相同的设置，但似乎它并不关心依赖项数组。

useSignalEffect(() => {

console.log(From useSignalEffect);

},[count]);

也试过了，但是没有效果

useSignalEffect(() => {

console.log(From useSignalEffect);

},[count.value]);

Answer 1

文档明确说明了这是做什么的：

如果您需要实例化新信号或对组件内的信号变化创建新的副作用，您可以使用

useSignal

、

useComputed

和

useSignalEffect

钩子。

https://github.com/preactjs/signals/tree/main/packages/react#hooks

不要在组件中使用

effect

，它将在组件的每次重新渲染时重新创建（并重新订阅）。对于

console.log()

来说，这不会产生太大影响，但可能会产生更严重的影响。