首先，props與state是React組件的兩種方法。

props，可以在組件中來獲取this.props的屬性。

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

2.state，獲取的是更新后的數(shù)據(jù)，是通過用戶的狀態(tài)來更改state。

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

3.在這里，可以通過props獲取組件的屬性，然后用state動態(tài)的更新。

?var?HelloMe?=?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(){var?value=?this.state.value;return??<div><input?type="text"?value={value}?onChange={this.handleChange}/><h1>Hi?{this.props.value}?{value}</h1><button?onClick={this.clickhandle}>清除{value}</button></div>;}});ReactDOM.render(<div?style={myStyle}><HelloMe/></div>,document.getElementById('example1'));

所以言之，相對于靜態(tài)的狀態(tài)下使用props會更好一些，動態(tài)的數(shù)據(jù)就需要使用state，

而React中，是虛擬的DOM樹，是遍歷全局后對數(shù)據(jù)進行對比，然后運算使用最快的方法進行的渲染。

轉載于:https://blog.51cto.com/shiqidelvtu/1919484

總結

以上是生活随笔為你收集整理的React中props与state的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。