React中state与props介绍与比较
一.state
1.state的作用
state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.
React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.
2.state工作原理
常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的
callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.
3.那些组件应该有state?
大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.
组件应该尽可能的无状态化,这样能隔离state,把它放到最合理的地方(Redux做的就是这个事情?),也能减少冗余并易于解释程序运作过程.
常用的模式就是创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props
传给子级.有状态的组件封装了所有的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据.
4.哪些应该作为state?
state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据.这中数据一般很小且能被JSON序列化.当创建一个状态化的组件
的时候,应该保持数据的精简,然后存入this.state.在render()中在根据state来计算需要的其他数据.因为如果在state里添加冗余数据或计算
所得数据,经常需要手动保持数据同步.
5.那些不应该作为state?
this.state应该仅包括能表示用户界面状态所需要的最少数据.因此,不应该包括:
计算所得数据:
React组件:在render()里使用props和state来创建它.
基于props的重复数据:尽可能保持用props来做作为唯一的数据来源.把props保存到state中的有效的场景是需要知道它以前的值得时候,
因为未来的props可能会变化.
二.props
1.props的作用
组件中的props是一种父级向子级传递数据的方式.
2.复合组件
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
</div>
);
}
}); var ProfilePic = React.createClass({
render: function() {
return (
<img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
}); var ProfileLink = React.createClass({
render: function() {
return (
<a href={'http://www.facebook.com/' + this.props.username}>
{this.props.username}
</a>
);
}
}); React.render(
<Avatar username="pwh" />,
document.getElementById('example')
);
从属关系:
Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,如果
组件Y在render()方法创建了组件X,那么Y就拥有X.
React 里,数据通过上面介绍过的 props
从拥有者流向归属者
React中state与props介绍与比较的更多相关文章
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- 【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 ...
随机推荐
- 选股公式blog+节选
<大智慧软件选股_大智慧软件如何选股>——一般性操作 http://jingyan.baidu.com/article/fa4125acb2028d28ac70923e.html < ...
- ubuntu13.04中把ibus中的中文拼音输入设为默认
全新的ubuntu ,先选择 下载服务器 首选项->软件和更新 选择 最佳服务器 准备工作:卸载Ubuntu默认的ibus输入法: sudo apt-get remove ibus 然后添加Fc ...
- 每天一个Linux命令(27)gzip命令
zip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后,其名称后面会多处“.gz”扩展名. (1)用法: 用法: gzip [选项参数][-s <压缩字尾字符 ...
- Data Structure Binary Tree: Print ancestors of a given binary tree node without recursion
http://www.geeksforgeeks.org/print-ancestors-of-a-given-binary-tree-node-without-recursion/ #include ...
- golang 获取指定目录下的子文件列表
GO语言按照深度遍历文件 原创 2016年07月20日 09:45:19 标签: go语言 / 遍历 / string 1971 常规方法不使用pathfilepath包 go的filepath包 g ...
- GAN基础
Generative Adversarial Networks GAN框架 GAN框架是有两个对象(discriminator,generator)的对抗游戏.generator是一个生成器, ...
- POJ 之2386 Lake Counting
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20003 Accepted: 10063 D ...
- python爬取某个网站的图片并保存到本地
python爬取某个网站的图片并保存到本地 #coding:utf- import urllib import re import sys reload(sys) sys.setdefaultenco ...
- 分享知识-快乐自己:solr 伪集群搭建
前言:在你搭建集群之前先去搭建一个单机版的 跳转 Solr 集群构建图: 1):部署(4个)Tomcat 下载 更改每一个 tomcat 启动端口号: [root@VMSolr tomcat_clus ...
- Tomcat翻译--Tomcat Web Application Deployment(Tomcat中部署web应用)
原文:http://tomcat.apache.org/tomcat-7.0-doc/deployer-howto.html Introduction(介绍) Deployment is the te ...