从一开始学习 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 会负责吧界面更新到最新状态.
props 意为属性, 只可父组件改变子组件的 props, 而子组件不能自更新.(组件内部的 this.props 属性是只读的, 不能修改)
props 是子组件暴露给外部的公有接口.
props 一定来源于默认属性或者通过父组件传递而来, 以下是这个写法:
- static propProps = {
- val:PropTypes.string.isRequired
- }
- static defaultProps = {
- val:0
- }
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 这个方法.
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/40c50114e69ecd91a42a7bb20026d5e0.html