从一开始学习React或者React-Native就对 props和state有着很大的疑惑，它们之间究竟有什么区别？又该怎么使用它们呢？
state的作用
众所周知state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致。
React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说就是用户界面会随着state变化而变化。
state是组件内部的状态，只能通过setState来改变，用来更新组件内部的数据
this.setState({items: data});//items为刚开始定义的state变量，data为要赋给items的值
如果items的值也为items，那么可以写成
this.setState({items});//和this.setState({items:items})等价
常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的
callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.
image.png
props意为属性，只可父组件改变子组件的props，而子组件不能自更新。（组件内部的this.props属性是只读的，不能修改）
props是子组件暴露给外部的公有接口。
props一定来源于默认属性或者通过父组件传递而来，以下是这个写法：
static propProps = {
val:PropTypes.string.isRequired
}
static defaultProps = {
val:0
}//欢迎加入全栈开发交流圈一起学习交流抠裙：864305860
Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,如果
组件Y在render()方法创建了组件X,那么Y就拥有X.
以下给props和state做一个总结：
props用于定义外部接口，state用于记录内部状态
props的赋值在于外部世界使用组件，state的赋值在于组件内部
组件不应该改变props的值，而state存在的目的就是让组件来修改的
props：一般用于父组件向子组件通信，在组件之间通信使用。
state：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。
总结
props是一个父组件传递给子组件的数据流，可以一直的被传递到子孙组件中。然而 state代表的是子组件自身的内部状态。从语义上讲，改变组件的状态，可能会导致dom结构的改变或者重新渲染。而props是父组件传递的参数，所以可以被用于初始化渲染和改变组件自身的状态，虽然大多数时候组件的状态是又外部事件触发改变的。我们需要知道的是，无论是state改变，还是父组件传递的 props改变，render方法都可能会被执行。
用一句概括React中的state和props:
props不变、states可变，所有的变化都来自setStates,所有的组件变化都是来自setStates这个方法。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论