React 中的类和函数组件 选择哪一个?

更新日期: 2022-11-08阅读: 739标签: 组件
在深入比较之前,让我们回顾一下 react 组件是什么

什么是 React 组件

每个 React 组件作为 JavaScript 本身都支持允许将一些可重用的代码片段插入到更大的代码片段中的功能。因此,它是一种应用程序的构建块。以这种方式,React 组件将 UI 划分为可重用的部分并返回 html。所以它们是 UI 的一种子功能

综上所述,什么是 React 组件就很清楚了。它们是 JS 代码与返回 HTML 片段的独立混合。这里 JS 的主要目的是提供业务逻辑并允许创建正确的 HTML,以便可以将其插入 dom

在 ReactJS 中有两种创建组件的方式:类和函数式组件。尽管它们存在差异,但它们做同样的事情,它们返回一些通过混合 JS 和 HTML 创建的 HTML。因此,让我们现在仔细看看并了解它们之间的主要区别

类组件

类组件是一个 JS 类,您可以通过以下方式在代码中定义它:

  class MyComponent extends React.Component {
    constructor (props) {
      super(props)
      this.state = {  }
    }
    render() {
      return <div>{"Welcome to React world"}</div>;
    }
  }

通常,类组件从 React.Component 类扩展而来。这些对象的状态定义了 React.Component 对象中的数据,可以在其生命周期内更改。因此,这些对象可以响应诸如ComponentWillUnMount、ComponentDidUpdate 和 ComponentDidMount 之类的生命周期方法,这些方法捕获状态更改并开始重新渲染, 进而修改 HTML 并用它更新 DOM

此外,类组件采用作为参数传递给构造函数的属性(props)。这些 props 应该通过调用super(props)传递给父组件类。通常,所有props在对象的生命周期内都可以访问

最重要的事情是,我们需要实现类组件中的render()方法。此方法将为我们返回必要的 HTML

函数组件

简单来说,函数式组件就是 JS 函数,可以通过两种方式创建:箭头函数或简单函数声明

  function MyComponent (props) {
    return <div>{"Welcome to React world"}</div>
  }

  const MyCoponentTwo = (props) => {
    return (
      <React.Fragment>
        <div>{"Welcome to React world"}</div>
        <p>have a nice day!</p>
      </React.Fragment>
    )
  }

通常,函数式组件返回单个 HTML,但通过div 或 React.Fragment 包裹。但是你必须记住,使用 React.Fragment 和 div 有些不同,React.Fragment元素并且不会渲染,因此它不会出现在DOM

那么如何使用函数式组件与类组件相比,因为它们只是 JS 函数?他们无法跟踪状态及其更新,因为他们没有扩展 React.Component?从前是这样的,但是显示他们创建了 React Hooks。使用它们允许以更简单的方式使用与类组件中相同的功能

这样,即使这些组件不是对象,我们也可以使用 React 钩子来维护和管理功能组件中的状态更新和生命周期事件

类组件和功能组件的比较

函数组件类组件
函数式组件只是一个简单的JavaScript纯函数,它接受道具作为参数并返回一个React元素(JSX)类组件需要从React进行扩展。组件并创建 render函数,返回一个React元素
功能组件中没有使用渲染方法,或者说它本身就是render它必须有render方法返回JSX
函数组件从运行到结束,一旦return就被释放了类组件被实例化,不同的生命周期方法保持存活,并且根据类组件的不同阶段运行和调用
也被称为无状态组件,因为它们只是接受数据并以某种形式显示数据,它们主要负责呈现UI也被称为有状态组件,因为它们实现了逻辑和状态
不能使用React生命周期方法(例如componentDidMount),不过那是以前React生命周期方法可以在类组件中使用,因为这就是为它设定的
hooks可以很容易地在功能组件中使用,使它们具有状态性它需要在类组件内部使用不同的语法来实现hooks
不使用构造函数构造函数用于初始化存储状态

使用哪一个?

就这两种组件做同样的事情而言,越来越多的开发人员倾向于使用函数式编程

有几种原因:

1.相同的功能。尽管功能组件是无状态的,但它们可以通过更易于使用和实现的钩子来完成类组件所能做的所有事情

2.简单。开发时间起着巨大的作用,编写功能组件有助于节省它。它们更容易和更快地编写,更重要的是,它们更容易阅读和理解。通常开发人员阅读的代码多于编写的代码,理解每一段代码对整个开发过程都有很大的影响

3.更好的测试。在功能组件中,一切都是明确的和预定义的,您不必担心隐藏状态。所以,总而言之,功能组件更容易测试

4.性能更好。通常,类组件更大、更复杂,进而对大型应用程序的性能和速度产生负面影响。此外,它们不是那么灵活,扩展您的软件变得更加困难。在这方面,功能组件更快、更具可扩展性和灵活性。这为你的 React 应用程序提供了更好的性能和速度

5.减少耦合。如果实体之间相互依赖,意味着如果您更改一段代码中的某些内容会立即影响另一个代码块。但是如果一个脚本的耦合度很低,那么编辑和缩放它就会简单得多,也不会造成任何麻烦

结束语

从上面说的你可以认为我跟倾向于组件的使用。老实说,因为它更容易、更快,并且提供了更好的代码质量。此外,即使是 React 团队也尽一切可能使功能组件变得更好,并将它们应用到更广泛的用途。他们创造了像钩子这样的新特性,并试图以多种方式鼓励功能组件的使用。因此,现在大多数开发人员都使用这种组件,如果您在项目中看到一些类组件,现在更多地将其视为遗留代码

尽管如此,类组件没有被淘汰,你始终可以自由选择你的方法

来自:https://segmentfault.com/a/1190000042772965

链接: https://www.fly63.com/article/detial/12237

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

react 函数子组件(Function ad Child Component)

函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?

vue.js的一个消息组件实例

v-show 是一个条件渲染指令,它只切换元素 CSS 属性的 display,这里当 show 值为 true 时,我们就显示该元素。props 是用来传递数据的,我们需要在子组件用 props 选项声明它预期的数据,上面的代码中我们声明了 3 个属性

vue.js注册引用全局消息组件

在 src/components 下新建 index.js 文件,复制贴入以下代码:注册全局组件需要使用 Vue.component,第一个参数 ‘Message‘ 是组件名称,第二个参数 Message 是一个对象或者函数,我们这里是一个对象

Vue和React组件之间的传值方式

在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux

通过npm或yarn自动生成vue组件

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template、script、style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

vue中prop属性传值解析

prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

Web组件简介

Web组件由三个独立的技术组成:自定义元素。很简单,这些是完全有效的HTML元素,包含使用一组JavaScript API制作的自定义模板,行为和标记名称(例如,<one-dialog>)。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!