@ actuallab/ 聚变- react
执行插接的钩子 组合反应状态 反应状态
渲染寿命周期 — TypeScript 等同 ComputedStateComponent<T> 内
ActualLab.Fusion.Blazor。当服务器侧数据发生变化,无效状态到达客户端时,
您的组件重置 。 没有投票,没有人工订阅,没有商店接线.
安装
npm install @actuallab/fusion-react
同伴依赖 : 反应 ^19无害环境管理首先采用CJS的后退;船舶本身 .d.ts。 。 。 .
计算状态
import { useComputedState } from '@actuallab/fusion-react';
function TodoList({ api }: { api: ITodoApi }) {
const { value, error, isInitial } = useComputedState(
() => api.ListIds('~', 10),
[api],
);
if (isInitial) return <p>Loading...</p>;
if (error) return <p>Error: {String(error)}</p>;
return <ul>{value?.map(id => <li key={id}>{id}</li>)}</ul>;
}
任何东西 computer 电话变成依赖,所以钩子重跑 当它有任何
无效. deps 像React's——改变它们 处理旧的 ComputedState 和建设
一个新的.
钩子是建立在 useSyncExternalStore,并创建和处置国家 内部
subscribe,在渲染过程中从未出现: 严格模式双峰和被丢弃的并发构件
两者都是安全的。 这也是为什么 state 实值 undefined 首先,先发制人
isInitial。 。 。 .
佩斯重算与 updateDelayer 选项 :
import { FixedDelayer, UIUpdateDelayer } from '@actuallab/fusion';
// 500 ms after invalidation…
useComputedState(() => api.GetSummary('~'), [api], { updateDelayer: FixedDelayer.get(500) });
// …but immediately while a UI action is running (or just finished)
useComputedState(() => api.GetSummary('~'), [api], { updateDelayer: UIUpdateDelayer.get(500) });
使用可移动状态
手动设定的被动值,既可以重置组件,也可以参与 聚合依赖图 :
import { useComputedState, useMutableState } from '@actuallab/fusion-react';
function SearchResults({ api }: { api: ISearchApi }) {
const { value: query, set: setQuery, state: queryState } = useMutableState('');
const { value: results } = useComputedState(
() => {
const q = queryState.use(); // registers the dependency
return q ? api.Search(q) : [];
},
[api, queryState],
);
return (
<>
<input value={query ?? ''} onChange={e => setQuery(e.target.value)} />
<ul>{results?.map(r => <li key={r.id}>{r.title}</li>)}</ul>
</>
);
}
value 读取通过 valueOrUndefined,因此它从不扔出——一个存储在
set(errorResult(e)) 表面为 error 并正常地重放,而不是卸下树.
API 表面
| 导出 | 说明 |
|---|---|
useComputedState(computer, deps, options?) | 回返 { value, error, isInitial, state } |
useMutableState(initial) | 回返 { value, error, set, state } |
UIActionTracker, (中文(简体) ), uiActions, (中文(简体) ), UIUpdateDelayer | 从 @actuallab/fusion 为方便起见 |
对于连接状态的横幅, 双 RpcPeerStateMonitor 从 @actuallab/rpc 一个平地
useState + 键 useEffect ——见: 文档。 。 。 .
文档
@actuallab/fusion-react参考文献 - 签名、生命周期、,AsyncContext说明- 类型脚本端口概览
- TodoApp 样本( 反应 + Fusion)
许可证
麻省理工学院——见 自由主义。 。 。 .