比 Hooks 更好用的 Signals
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
计算,类似于 useMemoeffect
副作用,类似于 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 抄到自己的库中。