react中props和state的用法区分

最新推荐文章于 2024-11-30 19:12:23 发布
原创 最新推荐文章于 2024-11-30 19:12:23 发布 · 265 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs

本文详细解析了React中Props和State的区别与联系，包括Props作为不可变的属性从父组件传递而来，而State作为组件自身可变的状态，通过setState方法进行更新。此外还介绍了如何利用React Developer Tools插件来查看组件的Props和State，以及如何合理地在组件中使用这两者。

props和state

  • props简单来说就是从父组件继承而来的map，当前组件不能修改，需要父组件重新传递来改变
  • state是这个组件自身的属性map，需要用到setState方法来进行改变，也可以用
查看组件props和state的chrome插件

我平时常用的是ReactDeveloperTools，当然你也可以用console.log来打印出来，但是console.log在async和await的方法中打印的结果可能与预期不符

state不允许使用的类型

在setState中不能去改变state，因为会导致不断递归，还有就是一些会让组件重新加载（render）的里面不能改变state

props改变时怎么触发子组件的更新

用componentDidUpdate，传入前后两种props，用lodash-es的一些比较方法来进行此次props改变是否需要触发子组件的更新

平时使用

一般创建一个父组件开始，初始化时就会加载props，这里面一般都是些继承而来的行为所需要的属性，而state是当前组件的一些特殊行为需要的属性。
虽说setState不建议每次更新太多数据，但是react有对这个方法进行优化，进行的是差异化更新的

React的基本知识：事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
weixin_57266891的博客
11-24 1118
这篇教学文章涵盖了大量的React基本知识。
49.React学习 —— 组件(props)、状态(state)、this指向、ref
Kylincsg的博客
02-19 1182
1.React的组件（函数与类）； 2.组件的状态state； 3.this的指向问题； 4.组件传递数据props； 5.表单处理（受控组件与非受控组件）
React中Props 和 State用法
weixin_30674525的博客
05-24 151
React中Props 和 State用法 1.本质 　　一句话概括，props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件...
深入解析React props和state属性
weixin_34310785的博客
11-26 143
本文主要介绍了React props和state属性的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 props 不知道大家还记不记得xml标签中的属性，就像这样： <class id="1"> <student id="1">John Kindem</student> <student id="2"&
React中state和props的区别
atkk1691的博客
03-16 197
props和state都是用于描述component状态的，并且这个状态应该是与显示相关的。 State 如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。例如：一个购物车的component，会根据用户在购物车中添加的产品和产品数量，显示不同的价格，那么“总价”这个状态，就应该用state表示。 Pr...
React props和state的区别
try my best
11-21 430
React中通过状态实现dom的渲染，组件状态分为两种：props和state。 props  props是指组件间的状态传递，由于React是单向数据流（自上而下）的，所以props从父组件传递给子组件。在组件之间通信用  组件内部的this.props属性是只读的，不能修改 state  state是组件内部的状态，只能通过setState来改变，用来更新组件内部
React中props与state的区别
weixin_33898233的博客
04-26 286
首先，props与state是React组件的两种方法。props，可以在组件中来获取this.props的属性。varHelloreact=React.createClass({ render:function(){ return<h1>Hello{this.props.name}</h1> } }); ...
理解React中的Props与State：传递与不可变性
React Props是React.js中的核心概念，它用于在组件之间传递数据。...在实践中，开发者需要区分何时使用state和props，并明智地选择何时将数据存储在哪个层次，以确保组件间的良好组织和数据流的可控性。
React Native新手入门教程：理解props与state
通过这篇React Native新手入门指南，我们了解了React Native的基础概念，包括它的特点、核心编程模型，以及如何区分和正确使用props和state。同时，我们还探讨了组件的生命周期和数据更新机制。掌握了这些基础知识，...
React中 类组件 与 函数组件 的区别
fighting ~的博客
03-23 3921
默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。像这样将自定义子组件包装在。
React中props和state区别
chuanxincui的博客
06-29 2162
props 主要是用于组件之间传递参数，获取组件的属性值。 组件之间数据单向流动 ，从父组件流向子组件。 对于外界/父组件的属性值，无法直接修改，它是只读的。states 主要用于组件更新控制，如果想重新渲染或更新组件，只需要修改state即可，然后根据具体修改的state,重新渲染用户界面（无需操作DOM对象）；本组件内的数据   相对封闭的单元/结构的数据例如 创建了 LikeBut...
React中的props和state
liya_nan的博客
09-18 417
一、props react中的prop是从外部传递给组件的数据。 给组件的prop赋值： &lt;SelectTagModel params='params' visible={this.state.showTagsModel} onCancel={this.handleCancel.bind(this, 'tags')} onOk={this.handleOk.bind(...
React 中props和state的区别
划水队员的博客
08-25 1197
文章目录前言一、props用法二、给props设置一个默认值三、State 和 Props两者的区别总结 前言 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 一、props用法 class MyComponent extends React.Component { //此处的构造器是可以省略的 co
React——props和state的区别
1-只小猴子的博客
06-24 283
在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。 state 与 props 是 React 组件中最重要的概念。如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。而 state 只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数...
React中state和props有什么区别？
alive_new的博客
04-14 1345
在React中，state和props是两个核心概念，它们代表了组件的状态和属性。props是组件的属性，它代表了从父组件传递给子组件的数据。如果需要改变props的值，通常需要通过更新父组件的状态或属性来实现。state是组件的内部状态，它通常用于存储组件的私有数据，这些数据可能会随着用户的操作或其他外部事件而改变。defaultProps是类组件的一个静态属性，它定义了组件的默认props值。propTypes是类组件的另一个静态属性，它用于定义props的类型，以便于在开发过程中进行类型检查。
【React 进阶】props 和 state 的区别详解
XH_jing的博客
02-24 8685
时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～ 前言 今天我们开始第一个专题：React 中 关于 props 和 state。当然我们不是对 props 和 state 基本用法的介绍，而是尝试由浅入深的来解释 props 和 state，并且归纳使用它们时的注意事项。 我们在开发应用时，必然是要与数据进行频繁交互的。React 的核心思想是组件化的思想，所有的页面会被切分成一些独立的、可复用的组件。 那么数据.
【React 面经】State 和 Props 的区别详解
最新发布
lph159的博客
11-30 1085
state是 React 组件内部的数据存储，通常用于保存组件的可变数据。与props不同，state由组件本身管理，且当state改变时，React 会自动触发重新渲染。state适用于存储那些用户交互后会发生变化的数据，比如输入框内容、按钮点击次数等。state的作用和管理方式state用于存储和管理组件内部的数据，通常与用户交互相关。可以通过useState钩子（函数组件）或（类组件）来管理和更新state。如何通过setState更新statesetState方法用于更新state。
React Props
Care_about的博客
03-31 480
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.pro
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值