React state · 前端开发手册

# React State(状态) **点评：例子敲出来了，其中还是有些问题，比如state是内置的吗？还要其他内置属性吗？getInitialState方法是怎么回事(已经解答)？** 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 实例</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"> //组件类(首字母大写且只能包含一个顶层标签) var LikeButton = React.createClass({ /*这个方法名称是已经定义好的，不能改名称。用于定义初始状态*/ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { /*state的值发生变化，自动调用this.render方法渲染*/ this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; //如果有元素内嵌，则需要return()，否则报错。 return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById('example') ); </script> </body> </html> ~~~