Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。
props:
1、props意为属性,只可父组件改变子组件的props,而子组件不能自更新。(组件内部的this.props属性是只读的,不能修改)
2、props是子组件暴露给外部的公有接口。
3、props是一个父组件传递给子组件的数据流,可以一直的被传递到子孙组件中。( props是React在整个组件树中传递数据用的)
看个小例子:
父组件:App.js
import Item from "./item";
export default class App extends React.Component{
render(){
return (
<Item name="leo" age=18> )
}
}
Item组件:
export default class Item extends React.Component{
render(){
return (
<p>{`名字:${this.props.name}`}</p>
<p>{`年龄:${this.props.age}`}</p>
)
}
}
如果想要修改Item组件中的name和age,不能通过this.props.name="donna"这种形式,只能通过修改修改App.js中的name和age进而修改Item中的name和age,当然怎么修改就要靠state啦,下面我们聊聊state
state
state意为状态,所谓的状态就是一种标记,设计用来控制某种逻辑,全局的私有变量,外部不能访问,state的改变会被render()函数自动捕捉到,当然state改变后是否执行render,还取决于bool shouldComponentUpdate(nextProps, nextState) 返回false则不会重新渲染。
1、state是组件内部的状态,只能通过setState来改变,用来更新组件内部的数据
this.setState({items: data});//items为刚开始定义的state变量,data为要赋给items的值
如果items的值也为items,那么可以写成
this.setState({items});//和this.setState({items:items})等价
2、 State 的更新是异步的。
调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State,计算下个State。当真正执行状态修改时,依赖的this.state并不能保证是最新的State,因为React会把多次State的修改合并成一次,这时,this.state将还是这几次State修改前的State。
3、State 的更新是一个浅合并(Shallow Merge)的过程。
当调用setState修改组件状态时,只需要传入发生改变的State,而不是组件完整的State,因为组件State的更新是一个浅合并(Shallow Merge)的过程.。
看下面的例子
this.state = {
name: 'donna',
age: 18
}
//当只需要修改状态name时,只需要将修改后的name传给setState:
this.setState({name: 'leo'});
//React会合并新的name到原来的组件状态中,同时保留原有的状态age,合并后的State为:
{
name: 'leo',
age: 18
}
总结:
props:一般用于父组件向子组件通信,在组件之间通信使用。
state:一般用于组件内部的状态维护,更新组建内部的数据,状态,更新子组件的props等。