react中的函数式组件和类式组件

一、函数组件

1. 定义函数组件

在React中,函数组件(Functional Component)是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props,并返回一个React元素或者一组React元素作为输出。定义函数组件的基本语法如下:

function MyComponent(props) {// 组件的逻辑和渲染内容return (// 组件的UI内容);
}

注意点:

  1. 函数组件的函数名通常使用首字母大写的驼峰命名法,以示区分普通的JavaScript函数。
  2. 函数组件接收的输入参数 props 是一个包含传递给组件的属性的JavaScript对象。可以通过 props 对象来访问传递进来的属性值。
  3. 函数组件内部的逻辑和渲染内容可以使用函数的控制结构、变量、循环等等,并根据需要返回一个React元素或者一组React元素。
  4. 函数组件只能返回一个根元素,可以使用多个子元素将它们包裹起来。
  5. 函数组件不能使用this关键字,因为它没有实例对象。如果需要使用状态或者生命周期方法等特性,可以使用React的钩子函数来实现

2. 函数式组件没有自己的state

在React中,函数组件是以函数的形式定义的组件。函数组件没有自己的state,但可以使用React的hooks来定义和管理状态

函数组件的定义形式如下:

function MyComponent(props) {return <div>Hello, {props.name}!</div>;
}

函数组件可以接收一个 props 对象作为参数,并且返回一个 React 元素。props 对象包含了从父组件传递下来的数据。

要让函数组件拥有自己的状态,可以使用 useState hook。 useState 返回一个带有两个元素的数组,第一个元素是状态的当前值,第二个元素是一个可以更新该状态的函数。可以根据需要在组件内使用多个 useState 来管理多个状态。

以下是一个使用 useState 的函数组件示例:

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button><button onClick={() => setCount(count - 1)}>Decrement</button></div>);
}

在上述示例中,useState(0) 定义了一个名为 count 的状态变量并初始化为 0。通过 setCount 函数可以更新 count 的值。每次点击 “Increment” 按钮时,count 的值都会增加 1。点击 “Decrement” 按钮时,count 的值会减少 1。

二、类式组件

1. 定义类式组件

在React中定义类组件需要继承React.Component类,并且实现render方法来返回需要渲染的内容。

类组件的定义通常如下所示:

import React from 'react';class MyComponent extends React.Component {render() {return (<div>{/* 内容 */}</div>);}
}

类式组件的注意点:

  1. 继承React.Component类:类组件必须继承React.Component类,以便能够使用React提供的组件功能。

  2. 构造函数:如果需要在组件中使用state状态数据,可以通过构造函数来初始化state。

  3. 渲染方法:类组件必须实现一个render方法,该方法返回要渲染的内容。render方法中可以使用JSX语法描述UI组件的结构。

  4. 生命周期方法:类组件可以使用React提供的生命周期方法,用于在组件的不同生命周期阶段执行特定的操作,如componentDidMount用于组件挂载后执行操作,componentWillUnmount用于组件卸载前执行操作等。

  5. 使用props:类组件可以通过props属性接收父组件传递的数据,并在render方法中使用。

  6. 事件处理:在类组件中可以定义事件处理方法,并将其绑定到相应的DOM元素上。

  7. 修改state:通过调用setState方法可以修改state状态数据,并自动重新渲染组件。

  8. 不直接操作DOM:类组件应该避免直接操作DOM元素,而是使用setState方法来更新组件的状态。

  9. 使用this关键字:在类组件中,需要使用this关键字来访问组件的属性和方法。

  10. 遵循命名规范:类组件的名称应该以大写字母开头,并采用帕斯卡命名法。

2. 类中的state以及如何更新

在React的类组件中,状态是通过构造函数的this.state属性来管理的。状态是一个普通的JavaScript对象,包含组件中的数据。构造函数只会在组件实例化时被调用一次,用于初始化组件的状态。

要更新状态,可以使用this.setState方法。setState方法接受一个新的状态对象作为参数,并比较新的状态与当前状态的差异,然后进行合并和更新。React会响应式地重新渲染组件并更新页面,以反映出新的状态。

以下是一个示例代码,演示了状态如何被定义和更新:

import React, {Component} from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0};}incrementCount() {this.setState({count: this.state.count + 1});}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.incrementCount()}>Increment</button></div>);}
}export default Counter;

上述代码中,Counter组件的状态在构造函数中初始化为一个计数器的初始值0。incrementCount方法会在点击按钮时被调用,用于更新count状态。通过使用this.setState来更新状态,React会重新渲染组件并将新的状态反映到页面上。

需要注意的是,更新状态是异步的,并且React会对多个setState调用进行批处理以提高性能。因此,在调用setState之后访问this.state可能无法立即获得最新的状态值。如果需要在更新状态后进行一些操作,可以使用setState的第二个参数,它是一个回调函数,在状态更新完成后被调用。

这就是在React的类组件中管理和更新状态的基本方法。通过合理使用状态,可以实现组件的交互和动态更新。

3. react更新状态的渲染过程

在React中,组件的状态(state)是存储在组件内部的对象。当状态发生变化时,React会重新渲染组件来反映这些变化。为了触发重新渲染,React要求使用this.setState()方法来更新组件的状态。

this.setState()方法是React提供的用于更新组件状态的方法。它是一个异步方法,接受一个对象作为参数,表示要更新的状态属性和它们的新值。当调用this.setState()时,React会合并新的状态与旧的状态,并计划执行一次组件的重新渲染。

这个渲染过程是React的内部机制自动完成的,不需要开发者手动干预。在重新渲染时,React会比较新旧状态的差异,并生成相应的虚拟DOM(Virtual DOM)树。然后,React会将这个虚拟DOM树与之前的虚拟DOM树进行比较,找出变化的部分,然后将这些变化应用到实际的DOM树上,从而更新用户界面。

值得注意的是,由于this.setState()是一个异步方法,所以多次调用this.setState()可能会被合并为一次更新。为了确保在状态更新后进行一些操作(例如在新状态生效后进行一些处理),可以使用this.setState()的第二个参数,这是一个回调函数,会在状态更新完成后被调用。

总结起来,React要求使用this.setState()方法来更新组件的状态,以触发重新渲染过程。这个过程是由React的内部机制自动完成的,用于比较新旧状态的差异,并将变化应用于实际的DOM树上,从而更新用户界面。

4. 事件绑定this指向问题

就是上面“2”中的示例,如果不使用箭头函数来绑定事件处理函数,而是直接使用onClick={this.incrementCount}这种写法,会导致this在事件处理函数中由于上下文的问题变成undefined

原因是,当使用普通的函数写法时,事件处理函数的执行上下文会丢失,即this会指向undefined。而使用箭头函数时,箭头函数没有自己的this,它会继承外层作用域的this,所以可以正确地将this绑定到事件处理函数中。

所以,为了确保事件处理函数中的this指向组件实例,需要使用箭头函数来绑定事件处理函数,即onClick={() => this.incrementCount()}

还有一种写法是将函数绑定到构造函数中:

constructor(props) {super(props);this.state = {count: 0};this.incrementCount = this.incrementCount.bind(this);
}

然后在onClick中直接使用this.incrementCount即可,这样也可以正确地将this绑定到事件处理函数中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/119163.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苹果官宣新品发布会 10月31日发布会与Mac有关

10 月 25 日消息&#xff0c;苹果宣布将于北京时间 10 月 31 日上午 8 点举行主题为“来势迅猛”的线上特别活动&#xff0c;届时或将有新品发布。 这场发布会与以往不同&#xff0c;将在北京时间 10 月 31 日上午 8 点举行。有很多猜测认为苹果届时会发布新款 Mac 电脑&#x…

TS的内置类型-Pick,Omit

简介 今天我们聊聊Typescript的内置工具类型&#xff0c;其中有两个类型颇为有意思。那就是 Pick (选取) 和 Omit (排除)。 核心&#xff1a;Pick 与 Omit 从现有类型中得到可复用类型 Pick 作用&#xff1f; 从类型对象中选取指定的属性类型 Omit 作用&#xff1f; 从类型…

Jenkins+Ant+Jmeter接口自动化集成测试

一、Jenkins安装配置 1、安装配置JDK1.6环境变量&#xff1b; 2、下载jenkins.war&#xff0c;放入C:\jenkins目录下&#xff0c;目录位置随意&#xff1b; Jenkins启动方法&#xff1a; cmd进入Jenkins目录下&#xff0c;执行java -jar jenkins.war 浏览器输入&#xff1a;l…

行为型模式-观察者模式

观察者模式是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;其所有依赖者都会收到通知并自动更新。 当对象间存在一对多关系时&#xff0c;则使用观察者模式。比如&#xff0c;当一个对象被修改时&#xff0…

JavaSE 二叉树

目录 1 树型结构1.1 概念1.2 树的表示形式1.3 树的应用 2 二叉树2.1 概念2.2 二叉树的基本形态2.3 两种特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储2.6 二叉树的基本操作2.6.1 二叉树的遍历2.6.2 二叉树的基本操作 2.7 基础练习题2.7.1 二叉树的前序遍历2.7.2 二叉树中序遍历…

Vue组件的本质和手写通过render渲染函数渲染组件

1.组件的本质 组件就是一组 DOM 元素的封装&#xff0c;本质就是一个对象 (mounted函数中打印一下组件即可看到打印的是一个对象) 如何利用javascript对象来描述一个组件&#xff1f; const MyComponent {render() {return {tag: div,props: {onClick: () > alert(hell…

TensorFlow2从磁盘读取图片数据集的示例(tf.data.Dataset.list_files)

import os import warnings warnings.filterwarnings("ignore") import tensorflow as tf from tensorflow.keras.optimizers import Adam from tensorflow.keras.applications.resnet import ResNet50 from pathlib import Path import numpy as np#数据所在文件夹 …

Unity C#中LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查

LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查 介绍Lua表lua表初始化lua移除引用lua中向表中添加数据lua中表中移除数据lua表中连接数据lua表中数据排序获取lua表长度获取表中最大值 UnityC#中LuaTableUnityC#中LuaArrayTable、LuaDictTable、LuaDictTable<K,V>…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…

ES(elasticsearch) - 三种姿势进行分页查询

1. from size 浅分页 "浅"分页可以理解为简单意义上的分页。它的原理很简单&#xff0c;就是查询前20条数据&#xff0c;然后截断前10条&#xff0c;只返回10-20的数据。这样其实白白浪费了前10条的查询。 GET test_dev/_search {"query": {"bool&…

【tg】 7 GroupInstanceCustomImpl

group GroupInstanceCustomImpl 核心GroupInstanceCustomInternal G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\group\GroupInstanceCustomImpl.h 最核心是是GroupInstanceCustomInternal: private:std::shared_ptr<Threads> _threads;std::u…

Spring-Bean的生命周期概述

Bean的生命周期概述 入门使用的Spring代码&#xff1a; ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml"); UserService userService (UserService) context.getBean("userService"); userService.test(); …

Node.js的readline模块 命令行交互的模块

Node.js是一个非常流行的JavaScript运行时环境&#xff0c;它提供了许多内置模块来帮助我们开发应用程序。其中之一是readline模块&#xff0c;它提供了一种简单的方法来读取用户输入并进行交互。 本文将详细介绍readline模块的API和使用案例&#xff0c;并附有代码注释。 re…

财报解读:步步逼近ChatGPT,科大讯飞即将迎来全面爆发?

10月份&#xff0c;科大讯飞进入新的成果验证节点。 一是进一步透露AI进展的财报发布。三季报显示&#xff0c;科大讯飞仍然保持较为稳健的发展步伐&#xff0c;营收始终处于增长状态&#xff0c;对讯飞星火认知大模型的应用成果&#xff0c;进行了进一步揭示。基于此&#xf…

基于LSTM encoder-decoder模型实现英文转中文的翻译机器

前言 神经网络机器翻译(NMT, neuro machine tranlation)是AIGC发展道路上的一个重要应用。正是对这个应用的研究&#xff0c;发展出了注意力机制&#xff0c;在此基础上产生了AIGC领域的霸主transformer。我们今天先把注意力机制这些东西放一边&#xff0c;介绍一个对机器翻译…

文心一言简单体验

百度正式发布文心一言&#xff0c;文心一言 这里的插件模式挺有意思&#xff1a; 测试了一下图解说明&#xff0c;随意上传了一张图片&#xff1a; 提供图解让反过来画&#xff0c;抓住了部分重点&#xff0c;但是还是和原图有比较大的差异&#xff01; 百宝箱 暂未逐个体验&am…

2023年9月青少年软件编程(Python) 等级考试试卷(五级)

2323.9青少年软件编程&#xff08;Python&#xff09; 等级考试试卷&#xff08;五级&#xff09; 分数&#xff1a; 100 题数&#xff1a; 38 一、 单选题(共 25 题&#xff0c; 共 50 分) 1. 阅读以下代码&#xff0c; 程序输出结果正确的选项是&#xff1f; &#xff08; &a…

Linux ————​文件权限

&#xff08;一&#xff09;文件权限 基础补充 文件基本属性&#xff08;Linux中万物皆是文件&#xff09;文件是操作系统用来存储信息的基本结构&#xff0c;是一组信息的集合。文件通过文件名来唯一标识。Linux中的文件名称最长允许255个字符&#xff0c;这些字符可用A~Z、0…

Vuex、localStorage和sessionStorage:如何选择合适的数据存储方式?

&#x1f31f;Vuex、localStorage和sessionStorage&#xff1a;如何选择合适的数据存储方式&#xff1f; 在Web应用开发中&#xff0c;我们经常需要管理和存储数据。而在Vue应用中&#xff0c;我们通常会遇到以下问题&#xff1a;如何管理应用程序中的状态和数据&#xff1f;如…

SpringBoot篇---第五篇

系列文章目录 文章目录 系列文章目录一、Spring Boot 的核心配置文件有哪几个&#xff1f;它们的区别是什么&#xff1f;二、如何集成 Spring Boot 和 ActiveMQ&#xff1f; 一、Spring Boot 的核心配置文件有哪几个&#xff1f;它们的区别是什么&#xff1f; Spring Boot 的核…