LWC Front-End Vue.js React.js

Salesforce LWC 与主流 JS 框架(Vue.js,React.js)的比较与认识

Posted by Peter Dong on March 19, 2023

Salesforce Lightning Web Components 介绍

Salesforce Lightning Web Components(LWC)是使用 Web 组件规范实现的框架.Web组件是一种在 Web 平台上开发可重用组件的技术.LWC将 Web 组件的概念引入到 Salesforce 平台上,使开发人员可以使用基于标准 Web 技术的组件来构建应用程序.

在 LWC 中, 组件的实现基于 Web 组件规范中的三个核心技术: Custom Elements, Shadow DOM 和 ES6模块. Custom Elements允许开发人员定义自定义HTML元素, 这些元素可以扩展现有的HTML元素或创建新的元素. Shadow DOM 允许开发人员在 Web 组件内部创建封装的 DOM 树, 并将其隔离到与外部 DOM 树不同的范围内 .ES6模块允许开发人员在组件之间共享代码, 并将组件的实现封装在模块中.

除此之外,LWC 还使用了一些内置的 Salesforce 库和 API,例如 Lightning Data Service 和 Lightning Message Service. 这些库和API使开发人员可以轻松地与 Salesforce 平台上的数据和业务逻辑进行集成与交互.

Vue.js 介绍

Vue.js 是一款用于构建用户界面的 JavaScript 框架. 它提供了一组工具和库, 帮助开发者构建高效,灵活和可维护的单页面应用程序(SPA)或交互式的前端界面.Vue.js 的核心是一个用于构建组件的响应式系统, 它能够自动追踪组件数据的变化, 并实时更新视图. Vue.js 也提供了许多方便的指令,过滤器和组件选项, 使得开发者可以更加容易地编写和组织代码. Vue.js 的文档和社区非常丰富, 支持多种开发场景和用例. 它也被广泛应用于 Web 应用开发, 移动应用开发和跨平台应用开发.

React.js 介绍

React.js 是一款用于构建用户界面的 JavaScript 框架. 它使用组件化的思想来构建应用程序, 将页面拆分成多个独立的组件, 每个组件负责自己的渲染和状态管理. React.js 的核心是一个虚拟 DOM(Virtual DOM)系统, 它能够在内存中创建并维护一个虚拟的页面结构, 然后在需要更新页面时, 通过比较新旧两个虚拟 DOM 的差异, 只更新必要的部分, 从而提高了页面的性能.React.js 提供了丰富的生命周期方法, 事件处理机制和状态管理工具,使得开发者可以更加方便地编写和组织代码.React.js 也具有很好的跨平台兼容性, 可以用于 Web 应用, 移动应用和桌面应用的开发.React.js 的社区非常活跃, 提供了大量的文档, 示例和开源组件, 能够满足各种开发需求.

区别

与 Vue.js 和 React.js 相比, LWC 有以下一些区别:

技术栈

Vue.js 和 React.js 是独立的 JavaScript 框架, 而 LWC 基于 Web 标准, 使用原生的 Web Component 技术来实现组件化. LWC 的底层技术是 Web Components, 这是一组 W3C 标准, 包括 Custom Elements,Shadow DOM 和 HTML Templates. 因此, LWC 能够与其他 Web Component 兼容的框架和库无缝集成.

渲染引擎

Vue.js 和 React.js 都有自己的虚拟 DOM 渲染引擎,而 LWC 则使用浏览器原生的渲染引擎,这意味着 LWC 的性能更高, 因为它不需要额外的渲染引擎和算法来更新 DOM.

数据绑定

Vue.js 和 React.js 都支持双向数据绑定,而 LWC 仅支持单向数据绑定,这意味着数据只能从父组件传递到子组件,而不能反向传递. 此外, LWC 中的数据绑定是通过属性绑定来实现的, 而不是像 Vue.js 和 React.js 那样使用模板语法或 JSX.

生命周期

Vue.js 和 React.js 都有自己的生命周期方法,LWC 也有自己的生命周期方法,但与 Vue.js 和 React.js 不同的是,LWC 的生命周期方法是通过 JavaScript 装饰器来实现的,而不是像 Vue.js 和 React.js 那样在组件定义中声明生命周期方法.

下面是一些示例代码,以帮助您更好地理解这些区别.

Vue.js 示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js!"
    }
  }
}
</script>

React.js 示例代码:

1
2
3
4
5
6
7
8
9
10
11
12

import React, { Component } from 'react';

class HelloWorld extends Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello React.js!" };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

LWC 示例代码:

1
2
3
4
5
6
7
8
9

<template>
  <div>{message}</div>
</template>

import { LightningElement, api } from 'lwc';

export default class HelloWorld extends LightningElement {
  @api message = "Hello LWC!";
}

在这个示例中, 您可以看到 Vue.js 和 React.js 使用模板语法或 JSX 来定义组件的模板 ,而 LWC 使用 HTML 模板语言. 此外, LWC 使用 @api 装饰器来定义公共属性, 而不是像 Vue.js 和 React.js 那样在组件定义中声明 props 或使用 this.props.

下面是一个更复杂的示例代码,涉及到组件的生命周期和事件处理:

Vue.js 示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
  <div>
    <button @click="toggleMessage"></button>
    <child-component :message="message" v-if="showChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      message: "Hello Vue.js!",
      showChild: false,
      buttonText: "Show Child"
    }
  },
  methods: {
    toggleMessage() {
      this.showChild = !this.showChild;
      this.buttonText = this.showChild ? "Hide Child" : "Show Child";
    }
  }
}
</script>

React.js 示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      message: "Hello React.js!",
      showChild: false,
      buttonText: "Show Child"
    };
  }

  toggleMessage() {
    this.setState(state => ({
      showChild: !state.showChild,
      buttonText: state.showChild ? "Hide Child" : "Show Child"
    }));
  }

  render() {
    return (
      <div>
        <button onClick={() => this.toggleMessage()}>{this.state.buttonText}</button>
        {this.state.showChild && <ChildComponent message={this.state.message} />}
      </div>
    );
  }
}

LWC 示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <div>
    <lightning-button label={buttonText} onclick={toggleMessage}></lightning-button>
    <c-child-component message={message} if:true={showChild}></c-child-component>
  </div>
</template>

import { LightningElement } from 'lwc';
import ChildComponent from 'c/ChildComponent';

export default class ParentComponent extends LightningElement {
  message = "Hello LWC!";
  showChild = false;
  buttonText = "Show Child";

  toggleMessage() {
    this.showChild = !this.showChild;
    this.buttonText = this.showChild ? "Hide Child" : "Show Child";
  }

  renderedCallback() {
    console.log('Parent component rendered');
  }
}

在这个示例中, 您可以看到 Vue.js 和 React.js 使用不同的事件处理语法来监听按钮点击事件, 而 LWC 则使用类似于 HTML 的 onclick 属性来处理事件. 此外, LWC 的生命周期方法是通过装饰器 @api 和 @track 来实现的, 而 Vue.js 和 React.js 则分别使用生命周期钩子和类成员来定义生命周期方法.

下面来探讨一下这三种框架在状态管理,性能和社区支持方面的区别.

状态管理

Vue.js 和 React.js 都有成熟的状态管理库, 分别是 Vuex 和 Redux. 这些库允许您集中处理应用程序的状态, 使其更易于维护和扩展.

在 LWC 中, 官方建议使用 @wire 装饰器和 wire() 函数来处理数据流和状态管理. 这种方法可以在 LWC 组件中使用 Apex 方法, Lightning Data Service和其他数据源.

性能

React.js 和 Vue.js 通常被认为是性能较高的框架, 其中 React.js 还可以使用 Virtual DOM 进一步提高性能.

在 LWC 中, 使用 Shadow DOM 和 Lightning Data Service 可以提高性能, 并且在使用 Salesforce 平台时会受到更好的优化.

社区支持

React.js 和 Vue.js 都有庞大的社区, 提供了大量的文档, 教程, 示例和第三方库.

LWC 相对较新(2019年2月发布), 但它也有一定的社区支持, 例如Salesforce 官方文档和 Salesforce 社区论坛.

总结

总的来说, LWC, Vue.js 和 React.js 都是优秀的 Web 前端框架. 它们各自有自己的优点和适用场景. 如果您正在使用 Salesforce 平台, LWC 是一个很好的选择, 因为它与 Salesforce 平台紧密集成, 并且能够使用 Lightning Web Components 标准库. 如果您正在开发独立的 Web 应用程序, Vue.js 和 React.js 都是很好的选择, 因为它们都有庞大的社区和成熟的生态系统, 能够提供丰富的资源和支持.

Buy Me a Coffee
CATALOG
    FEATURED TAGS
    Salesforce Apex Design Patterns LWC Data Security Design Front-end JWT MuleSoft Slides Translation