询问者
TypeScript UI 运行时有基于得到的状态,精细的绑定, 交易承诺的回滚,以及SPA、SSR和SG的一个路由图.
问客如何工作
- 基于Getter的状态带有自动跟踪.
state()让你得到更多 和一个安放器。 在组件使订阅时调用获取器 组件;您不列出状态或状态的依赖关系derive()。 。 。 . - 组件重置后加精细绑定. 状态更改重运行
读取它的组件。 函数子或道具,例如
{() => count()},是一个约束:它更新自己的DOM节点,没有 重新运行周围的组件. - 交易以回滚方式进行. 编写并适用每一条款
作为一笔交易。 如果组件投掷或 DOM 执行失败, 询问器
恢复最后承诺的DOM,以及听众、裁判、资源以及
失败的渲染所创建的订阅永远不会变成活的 。 错误发生
切换到最近的
ErrorBoundary,或者在没有边界时被重推. 捆绑在回滚中不断显示当前状态. - 一个路线图. 从
createRouteRegistry()驱动浏览器 导航( o)createSPA),水合(hydrateSPA),服务器渲染 (单位:千美元)renderRouteRequest)和静态生成(createStaticGen) (中文(简体) ).
在一个事件处理器中制作的书写被分批制作成一个预定的成像 排队的工作按固定顺序运行。 见 更新顺序 问者所保证的和所不保证的.
快速启动
import { state } from '@askrjs/askr';
import { createIsland } from '@askrjs/askr/boot';
function Counter() {
const [count, setCount] = state(0);
return (
<button onClick={() => setCount((value) => value + 1)}>{count()}</button>
);
}
createIsland({ root: document.body, component: Counter });
上面的Tuple形式和下面的直接可调用形式是等同的;参见 国家使用表 当每个都方便的时候.
它提供什么
运行时间
@askrjs/askr 导出核心运行时间原始 : state(), (中文(简体) ), derive(), (中文(简体) ),
selector(), (中文(简体) ), defineScope(), (中文(简体) ), readScope(), (中文(简体) ), getSignal()和联合来文十
运行时输出 .
公共API主要是功能和关闭. 错误类,例如
RouteDataLoadError 财务报告和审定财务报表 SSRDataMissingError 生活在他们的后路.
合法所有权用途 defineScope() 财务报告和审定财务报表 readScope()· ;
清空词汇没有相容性别名 .
应用程序启动、 路由、 合成资源、 数据帮助器、 错误边界等 他们自己的子路径.
基于 Getter 状态
状态通过 getter 函数读取,并通过 setter 函数更新. 读取是明确的呼叫,但依赖跟踪是自动的:一个组件 当它最后一次承诺时读到时,它会做出更改.
state(), (中文(简体) ), derive(), (中文(简体) ), selector(), (中文(简体) ), resource(),而另一个渲染范围
原始是反应意义上的钩子. 每一次通话都与其档期相匹配
呼叫位置,所以无条件呼叫他们 并按同样的顺序在每一个
渲染; 当命令更改时, 运行时间会抛出( 见
运行时间执行) (中文(简体) ). resource()
需要一个依赖数组,以决定其装载器何时重新运行.
国家使用表
state() 返回一个也可以使用的状态单元格。 调整结构
它给细胞作为获取器及其 .set() 作为设置方法。 打电话
state() 在组件函数内:
const [count, setCount] = state(0);
console.log(count());
setCount(1);
同一状态可以作为一个值保存,并通过 .set()数字 :
const count = state(0);
console.log(count());
count.set(1);
当本地名称和设置名称成为事件处理器时, 更倾向于解结构 ⊿拜肈 偏好通过状态单元格时直接形式为一个值或 当用一个名字读写。 两种表格都有相同的追踪, 排程,并更新语义.
运行和应用程序启动
启动属于 @askrjs/askr/boot. 游走的帮助者生活在
@askrjs/askr/router。 。 。 .
import { createSPA } from '@askrjs/askr/boot';
import { createRouteRegistry, route } from '@askrjs/askr/router';
const registry = createRouteRegistry(() => {
route('/', Home);
route('/about', About);
});
createSPA({
root: document.body,
registry,
});
同步资源
resource() 管理取消支持的同步工作.
import { resource } from '@askrjs/askr/resources';
function Data({ id }: { id: string }) {
const data = resource(
async ({ signal }) => {
const response = await fetch(`/api/${id}`, { signal });
return response.json();
},
[id]
);
if (data.pending) return <div>Loading...</div>;
if (data.error) return <div>Failed to load</div>;
return <div>{data.value?.name}</div>;
}
@askrjs/askr/data 是查询、变异、无效的唯一入口,
和数据运行时的帮助者;根包不会再导出它们.
开发者出错边界
ErrorBoundary 是用于渲染时间失败的选入边界原始。 这个
使每个环境都出现明显的倒计时(并扩展出错误细节)
在开发过程中默认的),仍然会记录基础错误,并且可以通过
(单位:千美元) resetKey 和你的应用状态有关 边界保护两个初始挂载
和预定的后挂载更新。 端口内容遵循其逻辑作者
并且也可以通过宿主周围的边界恢复.
import { ErrorBoundary } from '@askrjs/askr/components';
function App() {
return (
<ErrorBoundary fallback={<div>Something went wrong</div>}>
<FlakyView />
</ErrorBoundary>
);
}
文档
发布注释
已发布的软件包与寄存器一起版本 package.json。 。 。 .
发布工作流程在发布前验证版本标签.
安装
npm install @askrjs/askr
许可证
Apache 2.0 (英语)