美文网首页
两种创建组件的方式比较

两种创建组件的方式比较

作者: 转移到CSDN名字丹丹的小跟班 | 来源:发表于2021-01-31 15:37 被阅读0次
一. 函数式
  1. 操作简单。
  2. 实现的功能也很简单,只是简单的调取和返回jsx而已(是一个静态组件)。
  3. 组件不会被实例化,整体渲染性能得到提升因为组件被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。
  4. 组件不能访问this对象无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
  5. 组件无法访问生命周期的方法
    因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
  6. 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用
    无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件,未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化,所以只要有可能,尽量使用无状态组件。

二. 创建类式

1.操作相对复杂,但是也可以实现更多复杂的操作
2.能够实现生命周期函数操作业务

函数式可以理解为静态组件(组件内容调取是就已经固定了,很难在修改),而类这种基于组件内部的状态来动态更新渲染内容。一个是有状态的,一个是没有状态的。

参考

相关文章

  • 两种创建组件的方式比较

    一. 函数式 操作简单。 实现的功能也很简单,只是简单的调取和返回jsx而已(是一个静态组件)。 组件不会被实例化...

  • 父子组件

    创建父子组件的两种方式 方式一 方式二

  • React Native创建高阶组件(修饰器)

    创建 两种方式: 代理方式的高阶组件 继承方式的高阶组件 调用 两种方式都可以包装组件、扩展生命周期方法。不同点是...

  • React中Component和PureComponnt组件的区

    两种组件的声明方式,都可以创建React组件import React,{Component,PureCompone...

  • React学习笔记_02

    React 组件和状态 react 组件 1,组件的两种创建方式1,函数组件2,类组件 1,函数组件:使用 JS ...

  • React创建组件的两种方式

    1.创建组件两种方式 方式1.函数式组件 方式2.函数式组件--使用ES6的class来定义一个组件 本文目的仅仅...

  • 两种组件的创建方式

    1.无状态组件用函数创造出来的组件2.有状态组件class关键字创造出来的组件 3.本质区别:有无state属性

  • Angular 中 @ViewChild 与 @ContentC

    概述 在组件交互中,组件之间的镶嵌一般有两种方式: 在创建父组件时将子组件直接写在模版中。 子组件通过投影方式嵌入...

  • React - 类组件创建

    React创建组件有两种方式 函数式组件 类组件函数式组件已经学过,现在看下类组件怎么写。 函数式组件和类组件区别...

  • dva 的使用

    dva 常用代码 创建组件步骤(以创建user界面为例) 界面跳转的两种方式 第一种方式 第二种方式

网友评论

      本文标题:两种创建组件的方式比较

      本文链接:https://www.haomeiwen.com/subject/tmnqtltx.html