不同框架组件化之间的对比 之 Props

编程杂货铺
441 阅读3分钟

React/Vue/Angular/Svelte 组件 prop 的对比

不同的框架由于其内部的原理不同组件的也会有所不同。我们这里就探究主流框架组件化。

React 组件化

React 组件化以 文件为模块，使用时候一般是一个文件最为一个组件模块.

function App(props) {
	const { prop1, prop2} = props
	return (
     <div>我是一个文件React组件模块{prop1}-{prop2}<div>
    )
}
  • 组件模块中通过 props 来定制组件内部数据。

主要是单向数据流的。 props 的数据类型是javascript 数据类型。可以是：

  1. 基本数据类型，而
  2. 可以使用引用数据类型
  3. jsx
  • 数类型校验
  1. 在javascript中提供了专门的包 propsTypes 在开发环境校验。
  2. 在 typescript 环境中使用 interface 等类型进行约束
  • 数据默认值：
  1. class 组件和 function 组件，可以静态属性 defaultProps 来设置默认值。
  • 注意点：

React props 是单向数据流，props 只能在父组件中传递，不能在子组件中修改。若有更加复杂的组件数据传递，可以使用React和 React社区提供的优秀解决方案。

  • context api 上下文，在引入第三方组件的情况下，很好的选择
  • redux 是目前最好的，使用最为广泛的 react 状态管理工具
  • mobx 是响应式的状态管理工具

Vue 组件化

Vue 组件化，其实就是 Vue 实例。一个个 Vue 实例组合而成。常用的 Vue 实例是一个 单 Vue 文件组件。使用模板的形式书写。

Vue 也是一个文件就是一个模块，模块直接通过 import/export 输入和输出。

<template>
	<div>
    	hello! {{a}}
    </div>
</template>

<script>
	export default {
    	data() {
        	return {
            	a: 'this'
            }
        }
    }
</script>

Vue的实例是 Options 的组合。这个 options 是：

  1. props
  2. data
  3. watch
  4. computed
  5. methods
  6. hooks
  7. ...

Vue 也是要遵循单向数据流，在组件内部修该 props， Vue 会提示你，props 应该是不可变的！如果我们要可变的内容，可以使用 data, computed 这个option。

props 的类型的及其验证全部放在，props Options 里面完成。这点和 React 有些不一样，React 将 props 验证功能，单独发了包。React 更加专注视图层。

Props 也可以设置默认值，以及验证方法。

Angular 组件化

Angular 是类 MVC 框架，使用 Ioc 的思想构建模块之间关系。

Angular 组件与 React 和 Vue 大有不同。模块是一个类。模块是需要在 AppModule 进行注册才能使用。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 AppModule 中注册组件可以在全局的模块组件中使用，使用的模块名字就是使用 @Component装饰器中 selector 字段：

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
  constructor() {}

  @Input() app: Object;

  ngOnInit() {
    setTimeout(() => {
      this.app = "new app data";
    }, 2000);
  }
}

props 传值是组件接收外部数据的重要手段。

有了这些我们就可以使用理解 props 的内容了，在 Angular 中 props 不是叫 props 是一个装饰装饰的属性，这个装饰器是 Input 函数。

  • 类型以及类型约束，Input 修饰就是基本属性，类型约束发生在 Typescript 类型约束中。

我们在生命周期中试图修改 props 的内容， 发现是可以成功的。说明 Angular 的props 就是一个属性。接收外部传入的值。

Svelte 的组件化 Props

Svelte 的组件，是使用单文件组件的形式进组织的。下面是一个简单的 svelte 组件的例子：

  • main.svelte
<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>
<Nested/>
  • Nested.svelte
<script>
	export let answer = 'a mystery';
</script>

<p>The answer is {answer}</p>

组件定义 props 特别简单，直接在组件声明一个输出的变量，有默认值的赋值默认值。也没有有类型的约束包。Svelte 支持展开运算法，展开一个对象。

小结

文章先写起来，质量后面慢慢补上...

avatar
文章
阅读
粉丝