일괄 업데이트 반응
반응에서 일괄 업데이트는 무엇입니까
간단히 말해서 더 나은 성능을 위해 반응은 여러 상태 업데이트를 단일 상태 업데이트로 결합할 것입니다.
예를 들어 동일한 클릭 이벤트 내부에 여러 개
setState
가 있는 경우 반응은 한 번만 렌더링을 유발하고 모든 상태 업데이트를 단일 업데이트로 결합하여 렌더링을 유발합니다.반응이
setChange
메서드를 만날 때마다 렌더링을 유발한다는 것을 이전에 알고 있었기 때문에 이것은 놀라운 일이 될 수 있습니다.버튼을 클릭한 후 콘솔에서 아래 코드의 출력은 무엇이라고 생각하십니까?
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
flag: false,
}
}
handleButtonClick = (event) => {
console.log("Button clicked");
this.setState({
counter: this.state.counter + 1,
});
this.setState({
flag: !this.state.flag,
});
}
render() {
return (
<>
<h1>{`Counter: ${this.state.counter}`}</h1>
<h1>{`Flag: ${this.state.flag}`}</h1>
<button onClick={this.handleButtonClick}>Click me</button>
{console.log("render")}
</>
);
}
}
위의 예를 살펴보겠습니다.
나는
App
라는 클래스 구성 요소를 만들고 있으며 그 안에는 생성자 내에서 초기화되는 두 개의 값이 있습니다: counter
및 flag
. onClick
함수를 전달하여 handleButtonClick
이벤트를 통해 버튼을 클릭할 때마다 이 값을 변경하겠습니다. 이 함수는 counter
및 flag
의 상태를 업데이트하지만 setState
를 두 번 호출합니다.예상되는 상황:
먼저 "렌더링"은 초기 렌더링으로 인해 한 번 출력됩니다. 그런 다음 버튼을 클릭하면
setState
를 두 번 호출했기 때문에 "렌더링"이 두 번 출력됩니다.실제로 일어나는 일:
동일한 초기 "렌더링"출력이지만 버튼을 클릭하면 "렌더링"이 콘솔에 한 번만 출력됩니다. 이는 react가 여러 개
state
를 렌더링을 유발하는 단일 업데이트로 일괄 처리함을 보여줍니다.이제 React에서 일괄 업데이트가 무엇인지 이해하셨기를 바랍니다. 여기서 실수를 발견하면 댓글로 알려주세요.
Reference
이 문제에 관하여(일괄 업데이트 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zjarlab/batched-updates-in-react-1g7l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)