react|面试官：state 和 props 有什么区别？

最新推荐文章于 2024-04-01 00:09:44 发布

学习记录wanxiaowan

最新推荐文章于 2024-04-01 00:09:44 发布

阅读量557

点赞数

分类专栏：前端八股文文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43428283/article/details/129099948

版权

前端八股文专栏收录该内容

495 篇文章 26 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了React组件中的state和props的区别。state是组件内部管理并可变的数据，通常在构造函数中初始化，通过setState进行更新。props则是从父组件传入的不可变数据，用于单向数据流。两者的共同点在于它们都是JavaScript对象，用于保存信息并触发渲染。然而，props在组件内部不能修改，而state则可以。

摘要由CSDN通过智能技术生成

一、state

一个组件的显示形态可以由数据状态和外部参数所决定的，而数据状态就是state,一般在constructor当中初始化
当需要修改里面面的值状态旧需要通过调用setState来改变，从而达到更新组件内部数据的作用，并且重新调用组件 render 方法，如下面的例子：

class Button extends React.Component {
   
  constructor() {
   
    super();
    this.state = {
   
      count:

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学习记录wanxiaowan

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

React|面试官：说说对 React 的理解？有哪些特性？

VAN

02-18

505

说说对react的理解？有哪些特性

面试官：说说对 State 和 Props的理解，有什么区别？

weixin_44475093的博客

06-25

707

一、state一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state，一般在 constructor 中初始化当需要修改里面的值的状态需要通过调用setState来改变...

参与评论您还未登录，请先登录后发表或查看评论

React 中props和state的区别

划水队员的博客

08-25

1079

文章目录前言一、props用法二、给props设置一个默认值三、State 和 Props两者的区别总结前言 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。一、props用法 class MyComponent extends React.Component { //此处的构造器是可以省略的 co

React 入门 04 - props 和 state

指尖飞舞

04-09

466

前言在前文React 入门 03 - 元素与组件中学习了React基础元素与组件，今天来探究一下React组件的两个基本属性props和state的用法与区别。它们的一个重要的不同点就是：props是传递给组件的（类似于函数的形参），具有只读特性，是不可修改的。state是组件内自己管理的（类似于函数内声明变量），是可以用特定方式进行值更新的。 props props（“propert...

react|面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？

VAN

02-18

594

react生命周期有哪些不同的阶段？每个阶段对应的方法是

面试官：说说React-SSR的原理

beifeng11996的博客

11-16

304

到此为止我们就实现了一个简易的同构框架。同构渲染其实就是将同一套react代码在服务端执行一遍渲染静态页面，又在客户端执行一遍完成事件绑定。它的优势是，加快首页访问速度以及SEO友好，如果你的项目没有这方面的需求，则不需要选择同构。它的缺点是，不能在服务端渲染期间操作DOM、BOM等api，比如document、window对象等，并且它增加了代码的复杂度，某些代码操作需要区分运行环境。在实际项目中，建议使用Next.js框架去做，站在巨人的肩旁上，可以少踩很多坑。

面试官：React怎么做性能优化

beifeng11996的博客

10-05

722

最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进行汇总，并以此作为学习React的第一篇笔记（自己学习，什么都好，就是费头发…）。React.memo其中和是类组件中的优化方式，而React.memo是函数组件中的优化方式。和。

前端八股文（3）53-84

VAN

09-12

1525

前端八股文

javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com

最新发布

VAN

04-01

1323

适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。

前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎和 libuv 库，BFF 中间层，服务端渲染，

VAN

11-05

1187

前端学习

JavaScript教程|导出导入，import*,export default,

VAN

01-07

998

这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。

JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”

VAN

01-02

972

面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。

JavaScript教程|F。prototype,构造器，

VAN

12-29

945

在本章中，我们简要介绍了为通过构造函数创建的对象设置 [[Prototype]] 的方法。稍后我们将看到更多依赖于此的高级编程模式。一切都很简单，只需要记住几条重点就可以清晰地掌握了：F.prototype 属性（不要把它与 [[Prototype]] 弄混了）在 new F 被调用时为新对象的 [[Prototype]] 赋值。F.prototype 的值要么是一个对象，要么就是 null：其他值都不起作用。

JavaScript基础教程| 模块 (Module)模块级作用域import.meta,Async 适用于内联脚本,外部脚本，nomodule,构建工具

VAN

01-06

941

一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数：export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。例如，我们有一个 sayHi.js 文件导出了一个函数：export标记了可以从当前模块外部访问的变量和函数`);……

JavaScript基础教程|Proxy 和 Reflect，私有字段，内部插槽包装函数：“apply“，不变量，使用 “set” 捕捉器进行验证

VAN

01-07

899

Proxy 是对象的包装器，将代理上的操作转发到对象，并可以选择捕获其中一些操作。它可以包装任何类型的对象，包括类和函数。……然后，我们应该在所有地方使用 proxy 而不是 target。代理没有自己的属性或方法。如果提供了捕捉器（trap），它将捕获操作，否则会将其转发给 target 对象。我们可以捕获：读取（get），写入（set），删除（deleteProperty）属性（甚至是不存在的属性）。函数调用（apply 捕捉器）。

前端学习-函数，形参和实参，函数声明提升，sort函数，递归，浅克隆，深克隆，全局变量，遮蔽效应，设计模式，css盒子模型，BFC,css解决高度塌陷，

VAN

11-10

884

前端学习

JavaScript基础教程|generator,yield,throw,return,

VAN

01-06

883

generator 是通过 generator 函数 function* f(…) {…} 创建的。在 generator（仅在）内部，存在 yield 操作。外部代码和 generator 可能会通过 next/yield 调用交换结果。在现代 JavaScript 中，generator 很少被使用。但有时它们会派上用场，因为函数在执行过程中与调用代码交换数据的能力是非常独特的。而且，当然，它们非常适合创建可迭代对象。

JavaScript基础教程|BigInt,数字运算符，比较运算符，布尔运算代理对

VAN

01-07

864

最近新增的特性这是一个最近添加到 JavaScript 的特性。你能在 https://caniuse.com/#feat=bigint 找到当前支持状态。BigInt 是一种特殊的数字类型，它提供了对任意长度整数的支持。创建 bigint 的方式有两种：在一个整数字面量后面加 n 或者调用 BigInt 函数，该函数从字符串、数字等中生成 bigint。