React中state与props介绍与比较
来源:互联网 发布:淘宝退货率最低的产品 编辑:程序博客网 时间:2024/06/05 14:13
一.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.复合组件
这是React的官网案例
从属关系:
Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,如果
组件Y在render()方法创建了组件X,那么Y就拥有X.
React 里,数据通过上面介绍过的 props
从拥有者流向归属者
- React中state与props介绍与比较
- React中state与props介绍与比较
- React中state与props比较
- React之 Props与State
- props与state
- 1.3props与state
- React的数据载体state、props与context
- 【React】对于props 与 state的一点总结
- props与state的区别
- react中props和state属性
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- React中的state&props
- React 4 props & state
- react系列(4)props和state介绍
- ReactNative入门之props与state
- react中 state 和 props 主要的区别
- React学习笔记---Props&State
- React Native State和Props
- Mapnik连接文件数据、数据库中的vertor数据和raster数据
- unity光照
- Stimulsoft Reports.Net开发者常见Q&A汇总
- 利用Robotium进行安卓自动化测试
- javaScript如何实现上传文件
- React中state与props介绍与比较
- Mac下删除mysql
- MyBatis 模糊查询-拼接SQL语句
- 读 zepto 源码之工具函数
- 软件测试的分类——按测试模式来分类
- 今日LeetCode--28,38
- Java排序8大基本算法
- C++笔记:函数重载、覆盖、隐藏
- 一些技巧TD