LWC中国家管理的未来：了解信号

在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++;    }}

登录后复制

    increment    
{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 {    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;    }}

登录后复制

登录后复制

>在这里，我们需要将跟踪的属性传递给儿童组件，然后可以通过@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}
        increment    

登录后复制 亲子交流

// 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中国家管理的未来：了解信号的详细内容，更多请关注【创想鸟】其它相关文章！