react 中state与props
react 中state与props
1.state与props
- props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值。如果试图修改该值时,控制台会报错 only read。
- state与props正好相反,state中保存可变的值。通过this.setState()方法修改对应的值。使用state必须通过es6继承React.Component 类(官方推荐写法),并在构造函数内进行初始化。
export default class BoubleBind extends React.Component {
constructor(props) {
super(props);
this.state = {
textVal: ''
}
}
}
具体参考官方详解。
1.1 react state 与redux state
react 的state是react自己管理组件状态的工具,适用于该组件管理自己这一层级的状态,通过继承React.Component 类,在构造函数constructor中进行初始化,在各自事件中通过setState方法更新state值。
state的值只能在本组件内通过setState方法修改,state向下组件传递时,作为子组件的props,props为只读属性,子组件不能直接更新该值。父组件修改state的值会影响(反映/更新)到子组件,子组件将执行render方法。
子组件如果需要更新父组件的state值,只能通过props.callback调用父组件的方法,在父组件方法中执行setState方法更新state值,父组件更新state值,会反映到子组件上。
当组件层级比较多的时候,通过回调的方式更新父组件state来改变各级响应,这种方式写起来要经过多次传递,比较容易写错,这个时候,就可以考虑使用redux进行通信。redux可以理解为一个全局的状态管理工具,主要用于组件之间相互通信,尤其是没有关联关系组件之间的通信。
react 中state与props的更多相关文章
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- 【React自制全家桶】四、React中state与props的分析与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- React中state和props分别是什么?
整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...
- react --- React中state和props分别是什么?
props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...
- React中state和props的区别
props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么 ...
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
- React中的this.props.children
React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...
- react中withRouter解决props返回为空
利用 react + antd 框架书写导航栏时,遇到了几个坑,分别是一级菜单和二级菜单在点击的情况下,高亮没有任何问题,但是再点击浏览器返回按钮时,却就乱套了. 1. 二级菜单中,我们可以通过 pr ...
- react中state与setstate的使用
我们可以利用state来定义一些变量的初始值 //放在construcor里 this.state = { list: [1, 2, 3] } 要更改state里的值,注意要遵循react里immut ...
随机推荐
- FlytestingToolkit工具派送,懒人的测试思考
工欲善其事必先利其器,在IT路上摸爬这些年,去年我们分享了<Fiddler录制jmeter脚本,干货分享>,今天我们有另外的思考,我懒,故我思考. 下载解压后是这样的: 双击 Flytes ...
- OK335xS I2C device registe hacking
/*************************************************************************** * OK335xS I2C device re ...
- caffe测试mnist问题-error while loading shared libraries
问题描述 build/examples/mnist/convert_mnist_data.bin: error while loading shared libraries: libcudart.so ...
- [Algorithm] A nonrecursive algorithm for enumerating all permutations of the numbers {1,2,...,n}
def permutationN(n): a=[None]*n for i in range(n): a[i]=i+1 sum=1 for j in range(n): sum*=(j+1) i=0 ...
- Navicat Premium连接PostgreSQL
连接PostgreSQL时,报错 大致意思:你当前的IP没有连接权限,在文件pg_hba中缺少当前IP的配置 解决:找你的PostgreSQL安装路径,这是我的:C:\Program Files\Po ...
- AngularJS的简单订阅发布模式例子
控制器之间的交互方式广播 broadcast, 发射 emit 事件 类似于 js中的事件 , 可以自己定义事件 向上传递直到 document 在AngularJs中 向上传递直到 rootScop ...
- Start Developing iOS Apps (Swift) 开始开发iOS应用(Swift)
http://www.cnblogs.com/tianjian/category/704953.html 构建基础的用户界面 Build a Basic UI http://www.cnblogs.c ...
- Oracle更换字符集
现有数据库使用字符集是GBK,做读写分离的时候,发现读库的数据库安装错误,使用了UTF8的字符集 需要把读库的字符集进行调整. 1.进入PLSQL查看下数据库字符集 select * from nls ...
- Microsoft.Crm.Setup.SrsDataConector.RegisterServerAction 操作失败 Requested value 'Geo' was not found 的解决方法
error installing ssrs data connector on sql server for dynamics crm 2011 I think the post title says ...
- dubbo实战
http://blog.csdn.net/hejingyuan6/article/details/47403299