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> ~~~