React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>react state</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // 创建LikeButton组件 var LikeButton = React.createClass({ // 定义初始状态 getInitialState: function() { return {liked: false}; // 这个对象可以通过this.state属性读取 }, // 点击事件 handleClick: function(event) { // 更改状态值 this.setState({liked: !this.state.liked}); }, // 渲染 render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ) } }); // 调用 ReactDOM.render( <LikeButton />, document.getElementById('example') ); </script> </body> </html>
.