React中的类组件和函数组件(详解)

这篇具有很好参考价值的文章主要介绍了React中的类组件和函数组件(详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

      React的核心思想就是组件化,相对于Vue来说,React的组件化更加灵活和多样。主要可以分为两大类:函数组件类组件,这两大类组件的名称必须是大写字母开头

一、函数组件

     函数组件通常是function进行定义的函数,这个函数会返回和类组件中render函数返回一样的内容
函数组件的特点:

  • 没有生命周期,会被更新并挂载,但是没有生命周期函数
  • 没有this(组件实例)
  • 没有内部状态(state

       函数组件的代码相对来说是简洁的,专注于render,且组件不需要实例化,整体渲染得到了提升,并且视图和数据解耦分离,输出只取决于输入
       因为没有state ,只能通过props获取属性内容并实现组件的更新,无生命周期

import React from 'react'

export default function App(){
  render(){
    return (
      <div>Hello World!<div/>
    )
  }
}

注意:
      当render被调用的时候,会返回以下类型之一(同时还会检查this.props,this.state

  • React 元素:
  • 数组或者Fragments
    使render方法可以返回多个元素
  • Portals
    可以渲染子节点到不同的DOM子树上
  • 字符串或数值类型:
    DOM中会被渲染为文本节点
  • 布尔类型 或者 null
    什么都不渲染

二、类组件

       类组件的定义有两点要求,第一是需要继承自React.Component,第二是必须实现render函数
定义类组件的步骤:

  • constructor是可以选择的,通常需要在这里初始化一些数据
  • this.state中维护的就是我们组件内部的数据
  • render方法是class组件中唯一必须实现的方法
// index.js
import React from 'react'
import ReactDom from 'react-dom'

import App from 'App.js'

ReactDOM.render(<App />,document.getElementById('root'))


// App.js
import React,{Component} from 'react' 
export default class App extends Component {
  render(){
    return(
      <div>Hello World<div/>
    )
  }
}

类组件特点:

  • 状态state是在constructor中初始化的
  • 成员函数不会自动绑定this,需要手动绑定才能获得当前组件实例对象

手动绑定this的方法:

  • 可以在构造函数中完成绑定
  • 可以在调用的时候使用method.bind(this)完成绑定
  • 使用箭头函数绑定

      state的变化会影响组件的渲染,因此不能把所有的变量都放到state中,不然会造成一定的性能损失,下面情况都不应该作为一个状态放到state中:文章来源地址https://www.toymoban.com/news/detail-699957.html

  • 通过props获取
  • 该变量不在render中使用
  • 整个过程不会发生改变
  • 变量可以通过propsstate两者计算得出

到了这里,关于React中的类组件和函数组件(详解)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(56)
  • React----函数组件和类组件

    React 是一个用于构建用户界面的流行 JavaScript 库,其中组件是构建块的基本单元。在 React 中,有两种主要的组件风格:函数组件和类组件。本文将使用TypeScript介绍它们的用法、区别以及如何选择使用哪一种。 函数组件是一种简单的 React 组件定义方式,它是一个 TypeScript 函数

    2024年02月02日
    浏览(33)
  • React函数式组件

            我们可以通过所定义的函数来进行react中组件的定义。首先我们可以定义一个函数,然后通过函数的返回值来进行相关组件的定义。例如下面这张写法,我们可以通过调用一个函数,通过其返回值来进行相关的操作。         我们可以通过render来将我们定义的函数式

    2024年02月11日
    浏览(39)
  • react函数组件

    一、函数组件 1、函数组件的创建 函数组件:使用JS的函数(或箭头函数)创建的组件称为函数组件,函数组件有如下约定 函数名称必须以大写字母开头 函数组件必须有返回值,返回JSX表达式 渲染函数组件:用函数名作为组件标签名 组件名称可以是单标签也可以是双标签

    2024年02月05日
    浏览(34)
  • React---函数组件的常用hook

    2024年01月19日
    浏览(37)
  • React 中的受控组件

    React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制,更新时会通过回调函数进行数据的处理。 受控组件的特点包括: 值由状态控制:受控组件的值是通过 React 组件的状态进行控制和更新的。 通过事件处理器更新值:受控组件通常配合

    2024年02月15日
    浏览(196)
  • Day5:react函数组件与类组件

    「目标」 : 持续输出!每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。 「主要面向群体:」 前端开发工程师(初、中、高级)、应届、转行、培训、自学等同学 Day4-今日话题 react 「函数组件和类组件」 的区别,将从以下七个角度介绍: 语法和定

    2024年02月10日
    浏览(34)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(84)
  • 02react 函数组件useState的异步问题

    常见的钩子函数:useState、useEffect useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。 问题描述:把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。或者

    2024年02月03日
    浏览(47)
  • react中的受控组件和非受控组件

    在React中,受控组件和非受控组件是两种处理表单输入的方式。 受控组件是指由React控制并维护其状态的组件。这意味着表单输入的值由组件的 state 属性来管理,每次值发生变化时都会更新 state 。要更新受控组件的值,需要通过 onChange 事件处理函数来更新 state ,然后再将新

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包