关于reactjs的props和state之间的区别

props和state都是用于描述component状态的,并且这个状态应该是与显示相关的。
1.State(由内部改变的)

如果component的某些状态需要被改变,并且会影响到component的render,那么这些状态就应该用state表示。例如:一个购物车的component,会根据用户在购物车中添加的产品和产品数量,显示不同的价格,那么“总价”这个状态,就应该用state表示。

2.Props(由外部传送的)

如果component的某些状态由外部所决定,并且会影响到component的render,那么这些状态就应该用props表示。例如:一个下拉菜单的component,有哪些菜单项,是由这个component的使用者和使用场景决定的,那么“菜单项”这个状态,就应该用props表示,并且由外部传入。
 
时间: 2024-10-21 23:06:31

关于reactjs的props和state之间的区别的相关文章

React中Props 和 State用法

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C

React Native 快速入门之认识Props和State

眼下React Native(以后简称RN)越来越火,我也要投入到学习当中.对于一个前端来说,还是有些难度.因为本人觉得这是一个App开发的领域,自然是不同.编写本文的时候,RN的版本为0.21.0.我们马上以代码进入今天的学习. 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class Hello extends Component { re

关于props和state(React)

React的数据模型分为共有数据和私有数据,共有数据可以在组件间进行传递,私有数据为当前组件私有.共有数据在React中使用props对象来调用,它包含标签所有的属性名称和属性值,props对象有三个特性,单向流动性.显示传递性和只读性.单向流动性是指React的数据只能由父组件传递到子组件,而不能由子组件传递到父组件:显示传递性是指必须明确地在子组件中通过属性赋值,数据才可以传递到子组件:只读性是指props数据是只读的,数据修改后并未改变原始的数据模型,而是会新生成一份数据模型,并将新的数据

react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes 或者纯 函数时,这种自动绑定就不复存在了,我们需要手动实现 this 的绑定. 1.bind方法进行绑定,这个方法可以帮助我们绑定事件处理器内的 this ,并可以向事件处理器中传 递参数,如下图清晰明了: bind方法绑定 2.箭头函数进行绑定,箭头函数不仅是函数的“语法糖”,它还自动绑定了定义

外发外协外包三者之间的区别与联系

1.应当贯彻顾客为中心原则,通过建立体系来控制过程,确保产品质量.不要化精力在符合标准要求上.如果您 的目标.产品的要求不切合顾客要求的话,就是符合了ISO 9001标准要求,不能满足顾客要求的,符合顾客要求了,顾客满意了,不注意质量成本,经济效益,也就不一定能赚到钱的. 2.7.4条采购要求是,如果您从质量管理体系外得到各种影响产品要求符合性的资源(过程也作为一种资源)的话,就必须对这些产品或者活动(也就是过程) 加以控制的."采购"英文是purchasing,"外包过程&

socket,tcp,http三者之间的区别和原理

http.TCP/IP协议与socket之间的区别下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP.SMTP.SNMP.FTP.Telnet.SIP.SSH.NFS.RTSP.XMPP.Whois.ENRP 6 表示层 例如XDR.ASN.1.SMB.AFP.NCP 5 会话层 例如ASAP.TLS.SSH.ISO 8327 / CCITT X.225.RPC.NetBIOS.ASP.Winsock.BSD sockets 4 传输层 例如TC

Android培训准备资料之UI一些相似控件和控件一些相似属性之间的区别

这一篇博客主要收集五大布局中的一些相似控件和控件一些相似属性之间的区别 ImageView ImageButton Button 三者有啥区别? (1)Button继承自TextView,ImageView继承自View,ImageButton继承自ImageView                                              (2)Button支持android:text属性,而ImageButton和ImageView不支持,但是ImageView和ImageB

JavaScript中this和$(this)之间的区别

jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 以上的this为html元素即元素textbox,该元素有title属性,因此以上的程序没有错误.如

mysql 中execute、executeQuery和executeUpdate之间的区别

在用纯JSP做一个页面报警功能的时候习惯性的用executeQuery来执行SQL语句,结果执行update时就遇到问题,语句能执行,但返回结果出现问题,另外还忽略了executeUpdate的返回值不是结果集ResultSet,而是数值!特收藏如下一篇文章: JDBCTM中Statement接口提供的execute.executeQuery和executeUpdate之间的区别 Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和