리액트 스테이트(state)
번역 결과：
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>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요