关于React中props与state的一知半解
props
props英文翻译是道具的意思,我个人理解为参数,如果我们将react组件看作是一个函数,那么props便是函数接收外部数据所使用的参数。props具有以下特性:
1.不可变(只读性)
props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props
是只读的,不可改变的。如果props
在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props
传入组件中。
2.可以设置默认值
通常,我们会为props设置一个默认值,设置默认值的方法为defaultProps

class ShowIt extends React.Component{
render(){
return(
<h1>my name is {this.props.name}</h1>
);
};
}; ShowIt.defaultProps={name:"aabS"}; const ShowName=<ShowIt/>; ReactDOM.render(
ShowName,
document.getElementById('example')
);

总的来说,props是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变。
state
state的英文翻译是状态,而在react中,它也的确是指状态,是指组件的数据状态。
state可以在构造函数中初始化,如下所示:
constructor(props) {
super(props);
this.state = {date: new Date()};
}
也可以通过setState来修改其初始值:
tick() {
this.setState({
date: new Date()
});
}
当我们调用该方法时,react会重新调用render()方法,即重新渲染组件。
state与props的区别
state与props的主要区别在于,props不可变,state可变,props是一种从父级向子级传递数据的一种方式,state则仅用于实现交互功能。
关于React中props与state的一知半解的更多相关文章
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- React中props和state相同点和不同点
朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...
- react中 props,state,render函数的关系
1.当组件的 state 或者 props 发生改变的时候,自己的render函数就会重新执行. 2. 当父组件的render函数执行时,其所有子组件的render函数都会重新执行.
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- React react-redux props或state更新视图无法重新渲染问题
记录学习React时自己是如何挖坑把自己埋了的过程:children以及其它props被修改时相关组件无法重新渲染(做了两天) 父组件代码: class UserHome extends Compon ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- react中 props,state与render函数的关系
我们很明显的能够感受到,react是一门数据驱动的框架,当数据发生变化,页面就会自动发生变化,他背后的原理是怎么样子的呢 比如todolist例子里面,inputValue变了,框里面的内容就会自动变 ...
- React之props、state和render函数的关系
1.当组件中的state或者props发生改变的的时候,render函数就会被重新执行 2.当父组件的render函数被运行时,它的子组件的render都将被重新运行一次 3.子组件作为父组件里的一个 ...
随机推荐
- Xcode 4.1实用小工具:模拟网络连接和带宽
暂无评论 适用于Mac OS X Lion的开发套件Xcode 4.1中,有个新鲜的小工具叫做Network Link Conditioner(网络连接调节器),是一款具有高度可定制性的辅助工具,让用 ...
- Java常考面试题整理(一)
1.什么是java虚拟机?为什么java被称作是"平台无关的编程语言". 参考答案: java虚拟级是一个可以执行java字节码的虚拟机进程,java源文件被编译成能被java虚拟 ...
- 【转】diamond专题(三)—— diamond架构
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- SQLServer2012R2部署手册
1. 安装软件.net framework3.5 1.在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET Framew ...
- Point-wise Mutual Information
Point-wise Mutual Information (Yao, et al 2019) reclaimed a clear description of Point-wise Mutual I ...
- android 面试汇总<一>
1.1 Android Activity Q:说下Activity的生命周期? 技术点:Activity生命周期 思路:分条解释Activity从创建到销毁整个生命周期中涉及到的方法及作用 参考回答: ...
- redhat下配置SEED DVS6446开发环境2
---恢复内容开始--- 1.rpcbind步骤 linux包:portmap安装包 libgssglue-0.1-8.1.el6.i686.rpm libtirpc-0.2.1-1.el6.i68 ...
- ArcGISDynamicMapServiceLayer 和 ArcGISTiledMapServiceLayer 区别
ArcGISDynamicMapServiceLayer(动态地图服务)通常用于实时显示经常变化的数据,支持控制单个图层可见性,可动态投影.但缺点是显示效果较差,整个服务出图较慢:ArcGISTile ...
- 将训练好的tensorflow模型移植到android应用中
具体步骤如下: 1. TFLiteConverter保存模型 修改网络模型代码,将模型通过TFLiteConverter转化成为 TensorFlow Lite FlatBuffer即为.tflit ...
- slideToggle()---单击隐藏/浮现--jQuery--click() 方法
click() 方法 模块隐藏/浮现 <html> <head> <script type="text/javascript" src="/ ...