移动开发UI组件【免费下载链接】lithoA declarative framework for building efficient UIs on Android.项目地址https://gitcode.com/gh_mirrors/li/litho点击查看免费下载导读本文聚焦 Meta 开源的 Android 声明式 UI 框架Litho中使用 Java Spec APILayoutSpec/MountSpec编写组件时的State状态管理机制。你将学会如何把组件内部的交互行为如计数器的加减从外部传入的Prop迁移为组件自持的State掌握OnCreateInitialState、OnUpdateState、懒状态Lazy State三个核心注解的完整用法与约束并理解状态更新触发布局重算、组件身份identity与多线程安全背后的设计原理。读完本文你可以独立写出可复用、可封装、线程安全的带状态 Litho 组件。适用前提本文面向使用Java Spec APILayoutSpec/MountSpec 注解处理器生成代码的开发者。如果你使用的是 Litho 的 HooksKotlin风格 API请参阅 Hooks 入门。一、Props 与 State组件数据的两种形态在 Litho 中一个组件持有两类数据二者定位截然不同Props由父组件向下传递在组件生命周期内不可更改。Props 决定了组件长什么样是组件对外暴露的输入接口。State封装在组件内部、由组件自己管理与维护的数据对父组件完全透明。State 决定了组件如何响应内部交互。从源码层面看两者的语义差异被明确固化在注解定义中。State 注解 的文档指出Props 由父组件传入而 State 由组件内部管理State 的初始值由OnCreateInitialState方法设置并可在OnUpdateState方法中更新更新后会触发OnCreateLayout方法重新调用。官方 Props vs. State 文档给出了二者选用的判断准则需要从外部传入、驱动组件渲染的输入用 Props仅在组件内部变化、且父组件无需感知的数据用 State。二、从 Props 到 State三步改造 Counter 组件本文沿用官方文档的Counter计数器示例用户点击按钮增加或减少数值。理想的形态是——组件封装全部交互行为任何地方一行代码即可复用final CounterComponent counter CounterComponent.create().build();第 1 步把 prop 声明替换为 state 声明最初版本通过Prop int count接收数值只能静态展示无法响应点击LayoutSpec class CounterComponentSpec { OnCreateLayout static Component onCreateLayout(ComponentContext c, Prop int count) { return Row.create(c) .child(Text.create(c).text()) .child(Text.create(c).text( count)) .child(Text.create(c).text(-)) .build(); } }把Prop int count改为State int countLayoutSpec class CounterComponentSpec { OnCreateLayout static Component onCreateLayout(ComponentContext c, State int count) { return Row.create(c) //... .build(); } }第 2 步用 OnCreateInitialState 设置初始值OnCreateInitialState static void onCreateInitialState(ComponentContext c, StateValueInteger count) { count.set(1); }第 3 步在布局中使用 state 值OnCreateLayout static Component onCreateLayout(ComponentContext c, State int count) { return Row.create(c) .child(Text.create(c).text()) .child(Text.create(c).text( count)) .child(Text.create(c).text(-)) .build(); }完成这三步后count的初始值由组件自身决定父组件创建CounterComponent时无需再传任何数值参数——封装性达成。三、更新 State让按钮真正可交互静态展示还不够接下来让加减按钮真正改变count分两步完成。第 1 步在按钮上绑定点击事件OnCreateLayout static Component onCreateLayout(ComponentContext c, State int count) { return Row.create(c) .child(Text.create(c).text().clickHandler(CounterComponent.onClickIncrease(c))) .child(Text.create(c).text( count)) .child(Text.create(c).text(-).clickHandler(CounterComponent.onClickDecrease(c))) .build(); } OnEvent(ClickEvent.class) static void onClickIncrease(ComponentContext c) {} OnEvent(ClickEvent.class) static void onClickDecrease(ComponentContext c) {}第 2 步在点击处理器中更新 state完整的落地实现可以直接参考仓库中的 CounterComponentSpec.java对应文档中start_counter到end_counter的代码区间。它展示了从初始值、布局、事件到状态更新的完整闭环LayoutSpec class CounterComponentSpec { OnCreateInitialState static void onCreateInitialState(ComponentContext c, StateValueInteger count) { count.set(1); } OnCreateLayout static Component onCreateLayout(ComponentContext c, State int count) { return Row.create(c) .child( Text.create(c) .text( INCREASE ) .textSizeSp(16) .paddingPx(YogaEdge.END, 8) .clickHandler(CounterComponent.onClickIncrease(c))) .child(Text.create(c).textSizeSp(16).text( count)) .child( Text.create(c) .text( DECREASE ) .textSizeSp(16) .paddingPx(YogaEdge.START, 8) .clickHandler(CounterComponent.onClickDecrease(c))) .build(); } OnEvent(ClickEvent.class) static void onClickIncrease(ComponentContext c) { CounterComponent.increase(c); } OnEvent(ClickEvent.class) static void onClickDecrease(ComponentContext c) { CounterComponent.decrease(c); } OnUpdateState static void increase(StateValueInteger count) { count.set(count.get() 1); } OnUpdateState static void decrease(StateValueInteger count) { count.set(count.get() - 1); } }注意其中的关键模式OnEvent方法onClickIncrease/onClickDecrease本身不直接写更新逻辑而是调用生成组件类CounterComponent上由OnUpdateState方法生成的状态更新方法increase/decrease。事件方法只是转发器真正的状态变更集中在OnUpdateState方法中。四、OnCreateInitialState 初始化约束与默认值状态初始化基于组件的identity身份保证在整个生命周期中恰好执行一次即使多个线程并行地为同一组件计算布局初始化也只会发生一次。以下几个要点在编写OnCreateInitialState方法时必须牢记第一个参数必须是ComponentContext。允许Prop参数但 props 变化不会再次触发OnCreateInitialState方法。其余参数必须与其他生命周期方法中State注解的参数一一对应且类型必须是StateValue并用匹配State元素的类型进行参数化如StateValueInteger。初始化不是强制要求可以完全不写OnCreateInitialState方法。未显式初始化时状态取该类型推断出的默认值——int为0Boolean为falseObject 类型为null。开发者永远不应自己调用OnCreateInitialState方法它由框架在恰当的时机自动调用。从 OnCreateInitialState 注解源码 可以印证上述行为框架在解析布局调用OnCreateLayout之前调用该方法它可能在任意线程被调用当组件首次被加入布局层级时只调用一次只要 global key 不变后续状态更新或 props 变化都不会再次触发它只有把组件从层级中移除再重新加入时才会再次调用。需要特别强调的是用 prop 值初始化 state 时要格外小心。因为向组件传递新 props 不会再次调用初始化方法——初始化后的状态只能通过状态更新 API 来改变。StateValue 容器StateValueT是初始化方法与更新方法的参数包装类型它在运行时位于 litho-core 的 StateValue.kt本质上是OutputT的子类提供set(value)/get()方法。它的作用类似于一个输出参数生命周期方法内部通过它把值写回框架而不是把值作为返回值返回。五、OnUpdateState 更新状态同步与异步每次状态更新都会为对应的ComponentTree触发一次新的布局计算。值得注意的设计是向 Litho 组件传递新 props 与更新 state在底层走的是同一套实现机制二者没有性能差异。区别只在于语义何时应该用新 props 更新、何时应该用 state 更新参见 Props vs. State。不过 Litho 实现了reconciliation协调机制它会尝试检测状态更新影响了ComponentTree的哪一部分并复用那些无需变化的节点的布局从而最小化重算范围。状态更新可以在触发它的同一线程同步执行也可以从 Litho 的后台线程异步执行。在 Java API 中通过OnUpdateState注解方法定义组件的状态更新方式。根据需要更新的 state 及其依赖参数可以声明任意多个OnUpdateState方法。编写OnUpdateState方法时要注意表示状态值的参数必须与其他生命周期方法中State注解的参数同名类型必须为以匹配State类型参数化的StateValue。不允许Prop参数但允许Param参数。如果状态更新依赖 props 的值可以在调用状态更新方法的生命周期方法中把它们作为Param传入。编译器会为每个OnUpdateState方法生成组件类上的两个代理方法一个与OnUpdateState方法同名的方法——异步应用状态更新一个同名并带Sync后缀的方法如increaseSync——同步触发状态更新两个方法都以ComponentContext作为第一个参数其后跟随OnUpdateState方法中所有以Param声明的参数。以 Counter 为例OnUpdateState static void increase(StateValueInteger count)会生成CounterComponent.increase(c)异步与CounterComponent.increaseSync(c)同步两个可调用的静态方法。两个必须避开的陷阱不要在OnCreateLayout方法中调用状态更新方法。每个状态更新方法都会触发新一轮布局计算从而重新调用发起更新的组件的渲染方法极易造成无限循环。如果确实需要在渲染方法中更新状态请先评估是否改用下文介绍的 懒状态Lazy State只有在你能百分之百确定更新是条件触发的、且只会被有限次触发时才在渲染方法中使用常规状态更新。在MountSpec中bind和mount方法里不允许状态更新——这会直接导致运行时异常。如果确有需求请改用懒状态更新。六、Lazy State 懒状态懒状态更新针对的场景是需要更新某个状态的值但不希望立刻触发新的布局计算。懒状态更新完成后新值在事件处理器中可见但不会触发重布局。当前实现的一个限制懒更新后的值在事件处理器中立即可见但对其他生命周期回调如onMount不可见。这一点在 State 注解源码 中有同样说明懒更新的值目前只在OnEvent方法中或一次常规状态更新之后可用。懒状态的典型用途是维护无需反映到 UI 上的数据。例如只想在组件首次可见时记录一次分析analytics事件。用懒状态记录是否已发送过日志既完成了记录又不会让 UI 因为这次标记而重排。仓库中的 IdentityRootComponentSpec.java文档中start_lazy_state到end_lazy_state区间给出了一个完整范例OnEvent(VisibleEvent.class) static void onClickEvent(ComponentContext c, State(canUpdateLazily true) boolean logOnce) { if (!logOnce) { // do some logging IdentityRootComponent.lazyUpdateLogOnce(c, true); } }要点解析声明懒状态的关键是State(canUpdateLazily true)——这是 State 注解 中canUpdateLazily()属性的作用默认值为false。使用懒更新时框架会额外生成一个lazyUpdate*StateName*命名的方法本例即lazyUpdateLogOnce它只更新状态值不触发布局计算。懒状态仍然可以参与常规状态更新通过OnUpdateState方法两者并不互斥canUpdateLazily true只是额外开启懒更新能力。七、数据不可变性与组件身份State 的底层保障为什么 state 必须不可变由于 Litho 的布局计算可以在后台线程执行状态可能在任何时刻被多个线程同时访问。为了保证线程安全state 对象应该是**不可变immutable**的万一因极少数原因无法做到至少也必须是线程安全的。最简单的方案是尽量用原始类型primitives表达状态——原始类型天然不可变。组件身份identity如何工作Litho 使用key来跟踪组件在布局变化之间的身份从而在状态更新时准确地把某个组件识别为更新目标。这正是OnCreateInitialState保证只执行一次、状态更新能够找到正确组件的前提。相关机制详见 Keys and Component Identity。同一目录下的 ComponentIdentityActivity.java 与 IdentityRootComponentSpec.java 展示了组件身份在实际场景中的运用——父组件通过.key(first_row)等手段为子行设置显式 key配合OnUpdateState控制子组件Counter的显隐这直接关联了状态更新时组件身份的识别逻辑。八、小结与最佳实践清单给 Java Spec 组件添加状态的完整路径用State替换Prop声明组件内部可变数据用OnCreateInitialState参数为ComponentContextStateValueT设置初始值或直接依赖类型默认值在OnCreateLayout中读取State值渲染 UI用OnEvent事件方法绑定交互并在其中调用OnUpdateState生成的状态更新方法若仅需记录内部标记、避免触发重布局将状态声明为State(canUpdateLazily true)并使用生成的lazyUpdate*方法。需要时刻遵守的约束保持状态不可变保证多线程布局安全不要在OnCreateLayout中无条件调用状态更新防止无限循环不要在MountSpec的bind/mount中调用状态更新改用懒更新记住 props 变化不会重新触发OnCreateInitialState状态初始化只发生一次状态更新与 props 更新底层同构性能无差异选择依据是数据语义而非性能。以上全部机制均可在本仓库源码中验证注解定义见 litho-annotations 目录运行时容器见 StateValue.kt规格模型校验逻辑见 StateValidation.java完整可运行示例见 sample 目录的 identity 示例。赞分享移动开发UI组件【免费下载链接】lithoA declarative framework for building efficient UIs on Android.项目地址https://gitcode.com/gh_mirrors/li/litho点击查看免费下载相关推荐Litho 状态管理实战为 Component 添加 State 与 Lazy State UpdateLitho 状态管理实战为 Component 添加 State 与 Lazy State Update 导读 本文是 LithoA declarative移动开发UI组件Litho 教程使用 useState Hook 为组件添加状态Adding StateLitho 教程使用 useState Hook 为组件添加状态Adding State 本文是 Litho 官方教程「Adding State」章节的完移动开发UI组件Zustand状态管理状态更新完全指南Zustand状态管理状态更新完全指南 前言 在现代前端开发中状态管理是构建复杂应用的关键环节。Zustand作为轻量级状态管理解决方案以其简洁API和灵前端上一篇BilibiliDown终极指南一站式B站视频下载解决方案下一篇如何完整使用BilibiliDownB站视频下载终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考