React允许将代码封装成组件,然后像插入普通的HTML标签一样插入组件,在页面插入这个组件。React有个大的创新就是把组件看成一个状态机,一开始有个初始状态,然后用户互动,导致状态变化,从而触发渲染UI。getInitialState方法用于初始化,定义初始状态,也就是一个对象。这个对象可以通过this.state属性读取。当用户点击组件,导致状态变化,this.setState方法修改状态值,每次修改以后,自动调用this.render方法,再次渲染组件。
var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById('example') );
由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example') );