用一句概括React中的state和props

原创 年树先生 随笔 前端技术 19426阅读 6 天前 举报

从一开始学习React或者React-Native就对 props和state有着很大的疑惑,它们之间究竟有什么区别?又该怎么使用它们呢?

state的作用
众所周知state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致。

React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说就是用户界面会随着state变化而变化

state是组件内部的状态,只能通过setState来改变,用来更新组件内部的数据

如果items的值也为items,那么可以写成

常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的

callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.

image.png

props意为属性,只可父组件改变子组件的props,而子组件不能自更新。(组件内部的this.props属性是只读的,不能修改)
props是子组件暴露给外部的公有接口。

props一定来源于默认属性或者通过父组件传递而来,以下是这个写法:

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这个方法。

结语
感谢您的观看,如有不足之处,欢迎批评指正。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复