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可能会变化.
React中文文档
二.props
1.props的作用
组件中的props是一种父级向子级传递数据的方式.
2.复合组件
1 var Avatar = React.createClass({ 2 render: function() { 3 return ( 4 <div> 5 <ProfilePic username={this.props.username} /> 6 <ProfileLink username={this.props.username} /> 7 </div> 8 ); 9 } 10 }); 11 12 var ProfilePic = React.createClass({ 13 render: function() { 14 return ( 15 <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> 16 ); 17 } 18 }); 19 20 var ProfileLink = React.createClass({ 21 render: function() { 22 return ( 23 <a href={'http://www.facebook.com/' + this.props.username}> 24 {this.props.username} 25 </a> 26 ); 27 } 28 }); 29 30 React.render( 31 <Avatar username="pwh" />, 32 document.getElementById('example') 33 );
View Code
这是React的官网案例
从属关系:
Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,如果
组件Y在render()方法创建了组件X,那么Y就拥有X.
React 里,数据通过上面介绍过的 props
从拥有者流向归属者
深入理解React
转载于:https://www.cnblogs.com/ZSG-DoBestMe/p/5293457.html
React中state与props介绍与比较相关推荐
- React中state和props遇到的问题和个人总结
在学习和使用react构建项目的时候,一定会使用到组件的概念,为了某个模块的多次使用,通常会进行组件的复用,这时候就会涉及到组件之间的值的传递,在React中state是无法传递的,组件之间的通信通过 ...
- React 中使用 render props
React 中使用 render props 前言 正文 結語 前言 這篇也是紀錄了關於學習 react 的過程,起因是因為開始學習 hooks,但是發現好像有些坑比較重要但卻被我跳過了,像是 ren ...
- [react] React中怎么检验props?
[react] React中怎么检验props? PropTypes 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [react] 在React中组件的props改变时更新组件的有哪些方法?
[react] 在React中组件的props改变时更新组件的有哪些方法? 新版用 getDerivedstatefromProps(nextProps){ 业务逻辑} 个人简介 我是歌谣,欢迎和大家 ...
- react 中 state 的基本使用
有状态组件和无状态组件 函数组件又叫做 无状态组件,类组件又叫做 有状态组件 状态( state )即 数据 函数组件没有自己的状态,只负责数据展示(静) 类组件有自己的状态,负责更新Ul,让页面&q ...
- 表单组件中state依赖props
参阅避免派生状态的博文: https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html 转 ...
- React中pros和state的区别
props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件. state代表的是一个组件内部自身的状态(可以是父组件.子孙组件). state 和 props 主要的区别在于 pro ...
- 彻底理解react中的props
每天对自己多问几个为什么,总是有着想象不到的收获. 一个菜鸟小白的成长之路(copyer) 在react中 state 和 props是两个非常重要的属性,并且常用的属性.简单来说:都是用来保存数据 ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- react中props详解
1.props的基本使用 react组件之间的传值,是离不开props的 代码展示: export default class Parent extends Component {render() { ...
最新文章
- AI就是“大数据+机器学习”?答案是否定的
- 机器学习(MACHINE LEARNING) 【周志华版-”西瓜书“-笔记】 DAY1-绪论
- css工程化和浏览器兼容性问题
- 集合元素处理(Stream方式)
- Android多线程研究(1)——线程基础及源码剖析
- 【玩转cocos2d-x之七】场景类CCScene和布景类CCLayer
- cxGrid功能_用于备查【转】
- Qt-qwidget项目入门实例
- oracle中or会使索引,为何查询条件中多了 OR 选项,索引就走全扫描?
- ActiveMQ queue 代码示例
- ef oracle 批量更新慢_详解Oracle中多表关联批量插入、批量更新与批量删除
- ubuntu中手动编译源码安装Xorg-server过程中依赖关系的解决
- String类基础的那些事!
- 看雪论坛论坛小测试的答案
- Web API 源码剖析之默认消息处理程序链之路由分发器(HttpRoutingDispatcher)
- 2018年美赛E题M奖论文心得分享
- MINGW里面没有mingw32 make.exe
- 菜鸟教程: Linux cat 命令
- 使用cache tier
- 机电一体化柔性生产线加工实训系统(5站)
热门文章
- 十五、static关键字
- 十二、Object类
- 聊聊我的 2018 年
- 计算学生成绩 c语言,c语言项目实战2学生成绩的输入与计算.ppt
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第14节 高级篇幅之SpringBoot多环境配置_59、SpringBoot多环境配置介绍和项目实战...
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_02.SpringMVC框架的介绍
- ZT:Linux上安装JDK,最准确
- excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法
- 了解如何高速嵌入式?
- 5天学会jaxws-webservice编程第一天