在salesforce lightning web组件（lwc）中，我们具有有效工作的功能，例如 @track，@wire，自定义事件和闪电消息服务（lms）。但是，在管理复杂状态或在多个组件之间共享数据时，这些工具通常需要大量的额外努力。
>
什么是信号？
信号是一个由许多现代库和框架（包括solidj，preaxct，react和angular）所使用的概念。当一个值从任何源变化时，它都可以在所有位置进行自动反应性。
这不是一个新概念-jockingoutjs在2010年在其可观察的物品中实现了这种机制。
当每个信号实现都不同时，核心概念在框架之间保持一致。
这与salesforce有何关系？
salesforce目前正在尝试lwc的信号概念。我们可以通过检查此软件包来探索其潜在的实现：
实现密切反映了preact信号（
https://www.npmjs.com/package/@lwc/signals>
>它引入了一个可以访问和修改的。值属性的原始信号（）。然后，组件对更改和重新渲染的反应，类似于使用@track属性时。
import { signal } from 'some/signals';export default class examplecomponent extends lightningelement { count = signal(0); increment() { this.count.value++; }}
{count.value}
https://github.com/preactjs/signals).>此外，还有一个subscribe（）方法，可以启用有关值从信号变化的通知。
>
const firstname = signal("joe");firstname.subscribe(() => { console.log(`first name new value: ${firstname.value}`);});firstname.value = "john";
first name new value: john
@track有什么区别？
> salesforce lwc自动对属性变化做出反应 – 您甚至不需要@track。
在此示例中，当它们的值更改时，两个属性（firstname和lastname）都反映在模板中。
// example/example.jsexport default class example extends lightningcomponent { @track firstname; // <-- tracked lastname; // <-- tracked handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelasttnamechange(event) { this.lastname = event.detail.value; }}
full name: {firstname} {lastname}
// example/example.jsexport default class example extends lightningcomponent { @track firstname; // <-- tracked lastname; // <-- tracked handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelasttnamechange(event) { this.lastname = event.detail.value; }}
full name: {firstname} {lastname}
但是有一些局限性
要实现属性的反应性，必须先声明它们。>例如，在这种情况下，对最后一个名称的更改不会反映：>
// example/example.jsexport default class example extends lightningcomponent { firstname; // <-- tracked handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelastnamechange(event) { this.lastname = event.detail.value; // <-- not tracked }}
此外，在组件之间的共享和反映状态提出了挑战。
让我们尝试与孩子组成部分分享我们的状态：
// parent/parent.jsexport default class parent extends lightningcomponent { firstname; lastname; handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelastnamechange(event) { this.lastname = event.detail.value; }}
// parent/parent.jsexport default class parent extends lightningcomponent { firstname; lastname; handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelastnamechange(event) { this.lastname = event.detail.value; }}
>在这里，我们需要将跟踪的属性传递给儿童组件，然后可以通过@api接收它们。
// child/child.jsexport default class child extends lightningcomponent { @api firstname = ""; @api lastname = ""; get fullname() { return `${this.firstname} ${this.lastname}`; }}
full name: {fullname}
但是，试图从子组件修改状态时会遇到挑战：>
// child/child.jsexport default class child extends lightningcomponent { @api firstname = ""; @api lastname = ""; get fullname() { return `${this.firstname} ${this.lastname}`; } handleclearname() { this.firstname = ""; // <-- fails this.lastname = ""; // <-- fails }}
full name: {fullname}
不可能直接覆盖@api属性的值。
>
我们可以使用自定义事件来解决此问题：
42292874928
// parent/parent.jsexport default class parent extends lightningcomponent { firstname; lastname; handlefirstnamechange(event) { this.firstname = event.detail.value; } handlelastnamechange(event) { this.lastname = event.detail.value; } handleclearname() { this.firstname = ""; this.lastname = ""; }}
或者，我们可以声明消息频道，添加@wire属性，发布消息等等。
>
现在，想象一下在具有复杂状态管理要求的大规模应用程序中实施此功能 – 该代码变得越来越难以维护和有效地实施。
>
救援的信号！
这是信号真正发光的地方！让我们重构代码以利用信号：
// parent/signals.jsimport { signal } from 'some/signals';export const firstname = signal();export const lastname = signal();
// parent/parent.jsimport { firstname, lastname } from "./signals";class parent extends lightningcomponent { handlefirstnamechange(event) { firstname.value = event.detail.value; } handlelastnamechange(event) { lastname.value = event.detail.value; }}
// child/child.jsimport { firstname, lastname } from "c/parent/signals";export default class child extends lightningcomponent { get fullname() { return `${firstname.value} ${lastname.value}`; } handleclearname() { firstname.value = null; lastname.value = null; }}
full name: {fullname}
>这一点更加简单！
>
>在此新实现中，可以在组件之间共享信号，而当信号值更改时，组件会自动反应，需要最小的额外努力。>
我可以在lwc项目中使用信号吗？
答案既是否，yes！
>
>对lwc的天然信号支持仍处于概念性实验阶段，尚不可用。但是，您可以利用外部库今天实现信号概念。>
引入lwc信号！
由于我热情地在项目中实施信号，我为lwc创建了一个自定义实施。
github repo：
该库提供了一个全面的信号实现，该实现受到先验信号的启发），以：
为特征。
>计算值
效果
>批处理更新
深度反应性
>手动订阅
设计与salesforce的信号概念保持一致
https://github.com/leandrobrunner/lwc-signals 它如何工作？
实现具有直接的反应系统。
>信号和计算：当值更改时，通知订户效果：订阅信号并在更改发生时运行库包含一个带有信号的mixin，使lwc组件能够对信号变化做出反应。
withsignals ：使用内部效果跟踪信号依赖关系>渲染过程： 捕获使用哪些信号>读取内部__updatetimestamp属性
__ updatetimestamp成为依赖关系
>更新：更改信号触发时间戳更新，导致重新渲染 例子 基本组件
import { lightningelement } from 'lwc';import { withsignals, signal } from 'c/signals';export default class counter extends withsignals(lightningelement) { count = signal(0); increment() { this.count.value++; } get doublecount() { return this.count.value * 2; }}
count: {count.value}
double: {doublecount}
亲子交流
// parent.jsimport { lightningelement } from 'lwc';import { withsignals, signal } from 'c/signals';// signal shared between componentsexport const parentdata = signal('parent data');export default class parent extends withsignals(lightningelement) { updatedata(event) { parentdata.value = event.target.value; }}
87752449578
message from parent: {message}
全球国家
// store/userstore.jsimport { signal, computed } from 'c/signals';export const user = signal({ name: 'john', theme: 'light'});export const isadmin = computed(() => user.value.role === 'admin');export const updatetheme = (theme) => { user.value.theme = theme;};
// header.jsimport { lightningelement } from 'lwc';import { withsignals } from 'c/signals';import { user, updatetheme } from './store/userstore';export default class header extends withsignals(lightningelement) { // you can access global signals directly in the template get username() { return user.value.name; } get theme() { return user.value.theme; } toggletheme() { updatetheme(this.theme === 'light' ? 'dark' : 'light'); }}
// settings.jsimport { lightningelement } from 'lwc';import { withsignals } from 'c/signals';import { user, isadmin } from './store/userstore';export default class settings extends withsignals(lightningelement) { // global signals and computed values can be used anywhere get showadminpanel() { return isadmin.value; } updatename(event) { user.value.name = event.target.value; }}
深度反应性
const user = signal({ name: 'John', settings: { theme: 'dark' }});// Direct property mutations work!user.value.settings.theme = 'light';const list = signal([]);// Array methods are fully reactivelist.value.push('item');list.value.unshift('first');list.value[1] = 'updated';
概括信号为lwc中的状态管理提供了强大而优雅的解决方案，简化了组件通信和减少样板代码。当我们等待salesforce的本地支持时，lwc-signals库今天将此功能带给您的项目。>该项目可在github上获得，可以为贡献和反馈开放。>快乐编码！
以上就是LWC中国家管理的未来：了解信号的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501219.html
微信扫一扫 
支付宝扫一扫 
