React 요약 1: 비동기적으로 업데이트된 setState
var Text = React.createClass({
getInitialState: function() {
return {name: "react"};
},
keyUp: function(e){
this.setState({name: e.target.value});
console.log(this.state.name);
},
render: function() {
return (
"a">
， {this.state.name} ！
this.keyUp} />
);
}
});
ReactDOM.render(
,
document.getElementById('well')
);
set State 아래에 console를 추가했습니다. 컨트롤러를 통해 매번 인쇄하는 값은 현재 입력한 값이 아니라 지난번에 입력한 값입니다. 어떻게 된 일입니까?set State에서 이것은 비동기 처리 함수입니다. 동기화된 것이 아닙니다. console는 set State 후에 바로 실행되었습니다. 그래서 이때 상태가 진정으로 변경되지 않았습니다. 그래서 여기서 찾은 상태는 업데이트 전입니다. 업데이트 상태가 필요할 때 작업을 실행하면 어떻게 합니까? set State는 두 번째 인자가 있습니다. 콜백을 받아서 키 Up의 코드를 이렇게 바꾸려고 합니다.
this.setState({name: e.target.value}, function(){
console.log(this.state.name);
})이 때 로그는 우리가 원하는 내용만 출력되며, 매번 상태가 업데이트될 때마다 전송된 콜백 함수를 호출합니다.
따라서 다음과 같이 요약한다:react의 setState 특징:**1.비동기 조작 함수입니다.2. 어셈블리가 렌더링되기 전에this.setState가 아직 호출되지 않았습니다.3. State 변환을 대량으로 실행할 때 DOM을 더 빨리 렌더링할 수 있습니다(한 setState보다 상대적으로 빨리 옵니다)**
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
