React는 구성요소를 상태 머신으로 취급합니다. 사용자와 상호 작용하여 다양한 상태가 달성된 다음 사용자 인터페이스와 데이터의 일관성을 유지하기 위해 UI가 렌더링됩니다.
리액트 스테이트(state) 통사론
React에서는 구성 요소의 상태를 업데이트한 다음 새 상태를 기반으로 사용자 인터페이스를 다시 렌더링하기만 하면 됩니다(DOM을 조작하지 않고).
다음 예제에서는 LikeButton 구성 요소를 생성합니다. getInitialState 메서드는 객체인 초기 상태를 정의하는 데 사용됩니다. 이 객체는 this.state 속성을 통해 읽을 수 있습니다. 사용자가 구성 요소를 클릭하여 상태가 변경되면 this.setState 메서드가 상태 값을 수정합니다. 각 수정 후 this.render 메서드가 자동으로 호출되어 구성 요소를 다시 렌더링합니다.
리액트 스테이트(state) 예
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>php.cn 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) { 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>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요