React中state与props介绍与比较

一.stat

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? 

his.state应该仅包括能表示用户界面状态所需要的最少数据.因此,不应该包括:计算所得数据:    React组件:在render()里使用props和state来创建它. 

基于props的重复数据:尽可能保持用props来做作为唯一的数据来源.把props保存到state中的有效的场景是需要知道它以前的值得时候, 因为未来的props可能会变化.React中文文档  

二.props 

1.props的作用 

组件中的props是一种父级向子级传递数据的方式. 

2.复合组件       

从属关系:Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,如果组件Y在render()方法创建了组件X,那么Y就拥有X. 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,737评论 0 5
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,815评论 14 128
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,112评论 2 35
  • 先不谈原理,上来就是干,就是先安装。 前提条件: 在Linux系统上安装crul 那么问题来了,什么是crul? ...
    起个什么呢称呢阅读 297评论 0 0
  • 关键词:自我提升女生自述:我,97年,20岁,专科大二,耐看型,独生子女,乖乖女,之前认真谈过四个男朋友但都没发生...
    冷爱阅读 657评论 0 0