React - 你知道props和state之间深层次的区别吗

难度级别:初级及以上                                 提问概率:60% 


如果把React组件看做一个函数的话,props更像是外部传入的参数,而state更像是函数内部定义的变量。那么他们还有哪些更深层次的区别呢,我们来看一下。

首先说props,他是组件外部传入的参数,我们知道React非常核心的一个思想就是组件化,它希望我们原本的页面可以被拆分为更多更独立的子组件,从而有效的实现可复用性。那么一个大的页面拆分为多个子组件,就少不了从原本页面中为子组件传入props参数。但props是只读的,不可被修改,只能通过父组件修改外部数据,再通过单向数据流的形式将修改后的props重新传入子组件。不过也不能单纯的把props看做是数据,很多时候父子组件的回调函数也可以通过它来进行传递。

再说state,它是一个组件内部的私有状态,与Vue不同的是,React并不支持this.state直接赋值,需要通过setState方法来进行改变,constructor周期函数内则是初始化state的地方。在React组件中,很多组件内部会定义state,被称为有状态组件,反之,则是无状态组件。


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

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

相关文章

【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件

React18Typescriptcraco配置最小化批量引入Svg并应用的组件 前言创建React Typescript项目通过require.context实现批量引入Svg安装[types/webpack-env](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.zh-Hans.md)解决类型报错安装[craco](https://…

数据中心的网络架构设计,打造高效、安全的数字底座

数据中心的网络架构设计 一、数据中心网络架构设计原则 网络,作为数据中心的核心支柱,其结构精妙,由众多二层接入设备与少量三层设备共同编织而成。过去,数据中心网络规模有限,仅凭数十台设备的简单互连便能实现信息的畅通无阻。然而,随着技术与应用需求的飞速增长,数据…

16. 网络编程(1)

Hi,大家好!从本节开始我们学习网络编程相关的知识。基于TCP服务器和客户端实现流程框架。 本节目录: 网络编程在软件开发中具有相当重要的作用,涉及到各方各面: 网络通信: Linux系统作为一个多用户、多任务的操作系统,网络通信是其重要的功能之一。通过网络编程,可以实现…

Rust面试宝典第2题:逆序输出整数

题目 写一个方法,将一个整数逆序打印输出到控制台。注意:当输入的数字含有结尾的0时,输出不应带有前导的0。比如:123的逆序输出为321,8600的逆序输出为68,-609的逆序输出为-906。 解析 这道题本身并没有什么…

域控软件安全隔离关键技术剖析:MCU域 VS SOC域

安全隔离的需求 功能安全开发中,软件阶段由软件V模型左边的软件安全需求SSR开始。SSR是从技术安全需求TSR中提取出软件的功能安全需求,大多数情况下具有不同的ASIL等级。 图1 功能安全软件开发V模型 随后,软件安全需求会被分配到软件架构中的…

LeetCode110:平衡二叉树

题目描述 给定一个二叉树,判断它是否是 平衡二叉树 解题思想 使用递归依次计算左子树的高度和右子树的高度 代码 class Solution { public:int height(TreeNode* node) {if (node nullptr) return 0;int leftT height(node->left);if (leftT -1) return -1;…

Kivy 学习2

from kivy.app import App from kivy.uix.button import Button from kivy.uix.floatlayout import FloatLayout from kivy.graphics import Rectangle, Colorclass FloatLayoutApp(App):def build(self):def update_rect(layout, *args):设置背景尺寸,可忽略layout…

PlayerSettings.WebGL.emscriptenArgs设置无效的问题

1)PlayerSettings.WebGL.emscriptenArgs设置无效的问题 2)多个小资源包合并为大资源包的疑问 3)AssetBundle在移动设备上丢失 4)Unity云渲染插件RenderStreaming,如何实现多用户分别有独立的操作 这是第381篇UWA技术知…

【动态规划】【01背包】Leetcode 1049. 最后一块石头的重量 II

【动态规划】【01背包】Leetcode 1049. 最后一块石头的重量 II 解法 ---------------🎈🎈题目链接🎈🎈------------------- 解法 😒: 我的代码实现> 动规五部曲 ✒️确定dp数组以及下标的含义 dp[j]表示容量为…

Maven的scope详解

依赖范围介绍 maven 项目不同的阶段引入到classpath中的依赖是不同的,例如,编译时,maven 会将与编译相关的依赖引入classpath中,测试时,maven会将测试相关的的依赖引入到classpath中,运行时,mav…

路由器端口映射是什么意思?

路由器端口映射是一种网络配置技术,在私有网络中允许外部网络访问特定的服务或应用程序。通过将路由器的端口映射到内部客户端设备,可以实现从公共网络访问内部网络资源的目的。 天联组网介绍 天联是一款异地组网内网穿透产品,由北京金万维科…

数据治理项目——深铁集团数据治理规划

目录 一、前言 二、数据治理内容与主要措施 2.1 实施背景 2.2 主要举措 2.2.1 制定数据战略目标 2.2.2 绘制数据治理蓝图 2.2.3 绘制数据治理制度 2.2.4 梳理数据资产目录 三、 应用效果 3.1 数据资产可视化管理 3.2 数据标准治理 3.3 集团大数据平台优化建设 一、…

若依vue中关于字典的使用

文章目录 字典管理页面列表点击某个字典类型展示具体字典数据修改某一条字典数据 字典的应用一般用于select多选框中代码实现根据字典Dict的value获取Label,类似于通过key获得value 源码解析 字典管理页面 列表 点击某个字典类型展示具体字典数据 修改某一条字典数…

力扣HOT100 - 189. 轮转数组

解题思路: 三次反转。 先反转一次,再根据 k 拆分成两部分各反转一次。 class Solution {public void rotate(int[] nums, int k) {k % nums.length;reverse(nums, 0, nums.length - 1);reverse(nums, 0, k - 1);reverse(nums, k, nums.length - 1);}pu…

关于DNS解析那些事儿,了解DNS解析的基础知识

DNS,全称Domain Name System域名系统,是一个将域名和IP地址相互映射的一个分布于世界各地的分布式数据库,而DNS解析就是将域名转换为IP地址的过程,使人们可以轻松实现通过域名访问网站。DNS解析是网站建设非常关键的一步&#xff…

防火墙搭建内网 安装路由器

经典网络情况 也就是网吧 先配置网段 科普:子网掩码代表IP前面几位不能动 安装防火墙虚拟机 配置两个网卡 第一个 第二个桥接 设置子网掩码 虚拟机有DHCP 可以不用防火墙的DHCP 配置有网站的ip地址和网关 利用防火墙映射出去外网 然后看防火墙外网ip 然后…

[lesson20]初始化列表的使用

初始化列表的使用 类成员的初始化 C中提供了初始化列表对成员变量进行初始化 语法规则 注意事项 成员的初始化顺序与成员的声明顺序相同成员的初始化顺序与初始化列表中的位置无关初始化列表先于构造函数的函数体执行 类中的const成员 类中的const成员会被分配空间的类中…

C++ primer 第十八章

C语言的三大特性:异常处理、命名空间、多重继承。 1.异常处理 异常处理机制允许我们能够将问题的检测与解决过程分离开来。 1.1、抛出异常 在C语言中,我们通过抛出一条表达式来引发一个异常。 当执行一个throw时,程序的控制权从throw转移…

(学习日记)2024.04.12:UCOSIII第四十节:软件定时器函数接口讲解

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

ArcGIS和ArcGIS Pro快速加载ArcGIS历史影像World Imagery Wayback

ArcGIS在线历史影像网站 World Imagery Wayback(网址:https://livingatlas.arcgis.com/wayback/)提供了数期历史影像在线浏览服务,之前不少自媒体作者在文中宣称其能代表Google Earth历史影像。 1、一点对比 (1)同一级别下的版本覆盖面 以下述区域为例,自2014年2月20…