반응 상태는 무엇입니까? 반응 상태에 대한 자세한 소개(완전한 예시 포함)
- 寻∝梦원래의
- 2018-09-11 14:13:071472검색
이 글은 주로 react 구성 요소의 상태에 대한 자세한 설명을 소개합니다. 관심이 있는 경우 클릭하면 반응 상태에 대한 자세한 내용을 볼 수 있습니다
React 구성 요소는 필연적으로 사용자와 지속적으로 상호 작용해야 하며 처음에는 초기 상태가 있으며 사용자와의 상호 작용 중에 사용자의 각 작업은 상태 머신의 변경을 유발할 수 있습니다. 반응 요소가 표시됩니다. React의 주요 혁신은 상태가 변경되면 구성 요소를 상태 머신으로 처리하는 것입니다. React는 사용자 인터페이스와 데이터의 일관성을 유지하기 위해 가장 효과적인 방법으로 DOM을 업데이트하고 페이지를 다시 렌더링합니다.
1. 상태 작동 방식
1. 1 상태 저장
React는 this.state에 구성 요소의 상태를 저장합니다.
1, 2 상태의 초기값을 설정합니다.
this.state의 초기값을 설정하는 방법은 두 가지가 있습니다.
React.createClass 메소드를 사용하여 컴포넌트를 생성하는 경우 getInitialState 메소드를 사용하여 상태를 초기화합니다.
var scoreComponent=React.createClass({
getInitialState:function(){
return{
score:0
};
}
......
});
如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
constructor(props){
super(props);
this.state ={score:60};
}
...}1.3 구성 요소 상태 변경 방법
this.setState(data, callback)를 사용하여 상태 값을 변경합니다. 이 방법을 사용하면 데이터를 this.state에 병합하고 구성 요소를 다시 렌더링할 수 있습니다. 데이터 매개변수는 업데이트할 필드가 포함된 객체를 반환하는 객체 또는 함수일 수 있습니다. 선택적 콜백은 구성 요소가 다시 렌더링된 후에 호출됩니다. this.setState 메소드는 상태 값을 수정합니다. 각 수정 후 this.render 메소드가 자동으로 호출되어 구성 요소를 다시 렌더링합니다. (자세한 내용을 알고 싶으시면 PHP 중국어 홈페이지React Reference Manual 칼럼을 참고하세요.)
1.4 State에는 어떤 종류의 데이터가 포함되어야 할까요
UI 상호작용으로 인해 데이터가 변경됩니다.
1.5 State에는 어떤 데이터가 포함되어서는 안 되나요? 1. 계산된 데이터
2. Components
3. Props에서 복사한 데이터
state에는 시간, 형식 등 가장 원본 데이터가 포함되어야 합니다. .
구성 요소는 렌더링 메서드에서 제어되어야 합니다.
2. 상태 개발 예시
1. 클릭 수 계산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React状态机</title>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>
<script type="text/javascript" src="js/browser.min.js" ></script>
</head>
<body>
<p id="example"></p>
<script type="text/babel">
var BtnButton = React.createClass({
getInitialState: function() {
return {count: 0};
},
handleClick: function(event) {
this.setState({count:this.state.count+1});
},
render: function() {
var text =this.state.count ;
return (
<p onClick={this.handleClick}>
获取点击的次数<br />
<span>{text}</span>
</p>
);
}
});
ReactDOM.render(
<BtnButton />,
document.getElementById('example')
);
</script>
</body>
</html>위 예시에서는 getInitialState 메소드를 사용하여 객체를 읽을 수 있습니다. this.state 속성을 통해. 사용자가 구성 요소를 클릭하여 상태가 변경되면 this.setState 메서드가 상태 값을 수정합니다. 각 수정 후 this.render 메서드가 자동으로 호출되어 구성 요소를 다시 렌더링합니다. 이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
React 사용자 매뉴얼 칼럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 반응 상태는 무엇입니까? 반응 상태에 대한 자세한 소개(완전한 예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!