React中props与state的区别

首先，props与state是React组件的两种方法。

1. props，可以在组件中来获取this.props的属性。

varHelloreact=React.createClass({
render:function(){
return<h1>Hello{this.props.name}</h1>
}
});
ReactDOM.render(
<Helloreactname="BOOM"/>,document.getElementById('example2')
);//HelloBOOM

2.state，获取的是更新后的数据，是通过用户的状态来更改state。

varHelloreact=React.createClass({
getInitialState:function(){
return{name:'BOOM'};
},render:function(){
return<h1>Hello{this.state.name}</h1>
}
});
ReactDOM.render(
<Helloreact/>,document.getElementById('example2')
);//HelloBOOM

3.在这里，可以通过props获取组件的属性，然后用state动态的更新。

varHelloMe=React.createClass({
getDefaultProps:function(){
return{
value:'props'
};
},getInitialState:function(){
return{value:'state'};
},handleChange:function(event){
this.setState({value:event.target.value});
},clickhandle:function(event){
this.setState({value:""});
},render:function(){
varvalue=this.state.value;
return<div>
<inputtype="text"value={value}onChange={this.handleChange}/>
<h1>Hi{this.props.value}{value}</h1>
<buttononClick={this.clickhandle}>清除{value}</button>
</div>;
}
});
ReactDOM.render(
<divstyle={myStyle}><HelloMe/></div>,document.getElementById('example1')
);

所以言之，相对于静态的状态下使用props会更好一些，动态的数据就需要使用state，

而React中，是虚拟的DOM树，是遍历全局后对数据进行对比，然后运算使用最快的方法进行的渲染。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!