比 Hooks 更好用的 Signals

2023-11-20前端

Signals

2019年，React推出Hooks概念，使用后只能膜拜太牛了。

原以为，Hooks可能就是前端暂时的终点，短期内不可能有比Hooks还厉害技术出现了。

没想到技术迭代还是太快，2022年9月 preact 又发布了Signals，今天简单试了一下，又一次颠覆了我对前端的理解！

Hooks 的缺点

有点难（相对于Singals而言），虽然Hook相对其它前端技术已经很简单了，但是学习量也是有的，特别是每个Hooks的一些使用规则，不深看可能经常掉坑，总会给新手带来一些困惑。
只能在函数内部使用，会降低一些组合灵活性。

Signals 优点

Hooks 的缺点就是 Signal 的优点，先看代码：

import React,{ useState } from 'react';
import { signal } from "@preact/signals-react";

export const count = signal(0);

const CounterSignal = ()=>  <div>
    <p>数量: {count.value}</p>
    <button onClick={()=>count.value++}>加个数</button>
</div>

相对而言，Signal就简单多了，只有一个value属性，直接操作，让简单粗暴进一步回归本质！另外：

虽然Signal 是preact发布的，但在React中仍然可以完美使用，不打折扣，只要引用@preact/signals-react即可。
Signal 和 Hook 不并冲突，可以组合使用！

用来干什么？

据preact描述，开发Signals的初衷就是解决状态管理问题，目标可能是替代 Redux。

虽然 Redux 很强大，但发觉真正用好的项目并不多，而且难度也可劝退很多新手。Signal 目前提供了3个简单的API，用于扩展：

computed 计算，类似于 useMemo
effect 副作用，类似于 useEffect, 另外还有 useSignalEffect
batch 批量处理，有点类似于事务，被batch包装后的变化只会触发一次，比 Hooks 更好用。

感觉基本功能已经够用了。即便不能代码 Redux，用来替代useContext 还是非常好的：

比如一个简单的 context 的写法如：

import { createContext,useContext } from "react";

const AppState = createContext();

const Main = () => <AppState.Provider value={{xx:'oo'}}>
    <App />
</AppState.Provider>

const App = () => {
  const state = useContext(AppState);
  return <p>{state.xx}</p>;
}

使用 Signal 就可以省去一个包裹层和，一堆的 create/Provider/Cosumer 语法，简单不是一点半点。

import { signal } from "@preact/signals-react";

const AppState = signal({xx:'oo'});

const App = () => {
  return <p>{AppState.xx}</p>;
}

小结

今天只是随便看了下，并未应用到实际的项目中，所以描述可能会有错误。

如果要投入使用，可以去多查查资料看看，我也尚不清楚是否有坑，不过感觉大概率是不支持use server，在nextjs中可能很难发挥。

不得不说，这个肯定是 preact 领先 react 的一个点，因为 react 近几个版本都在 use server发力，所以没玩出Signal这种杀器。不知道后续 React 可能会反向抄袭 preact 抄到自己的库中。