programing

ReactJs, 같은 파라미터로 setState를 호출한다.

batch 2023. 3. 17. 19:41
반응형

ReactJs, 같은 파라미터로 setState를 호출한다.

리액트 문서를 읽고 있었는데shouldComponentUpdate()제가 알기로는 매번setState()이 호출되면 해당 컴포넌트의 재설정이 업데이트됩니다.

질문입니다만, 갱신할 값이 현재 상태 값과 같을 경우, 재렌더 이벤트가 트리거됩니까?또는 현재 값과 갱신할 값을 수동으로 확인해야 합니다.shouldComponentUpdate()

React 공식 문서에는 다음과 같이 기술되어 있습니다.

디폴트 동작은 상태 변경 시마다 재렌더하는 것입니다.

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

즉, 디폴트로는render()컴포넌트 중 하나의 컴포넌트가 실행되면state또는props값이 바뀝니다.

should Component Update()사용하여 이 기본 동작을 재정의할 수 있습니다.다음은 상태 값이 변경된 경우에만 업데이트하는 예입니다.

shouldComponentUpdate(nextProps, nextState) {
    return this.state.someValue !== nextState.someValue;
}

주의: 이 예에서는 완전히 무시합니다.props에 대한 변경은?props트리거되지 않음render().

구현에 관한 @Jyothi의 답변에 추가shouldComponentUpdate()불필요한 재입장을 생략하다React 15.3그들은 새로운 개념을 도입했다PureComponent. reactjs 문서에서

그들의 차이점은 리액트이다.컴포넌트가 show Component Update()를 구현하지 않지만 React.Pure Component는 얕은 프로포트와 상태 비교를 통해 구현합니다.

이것에 의해, 불필요한 콜을 생략할 수 있습니다.render클래스 컴포넌트에서 구현만 하면PureComponent여느 때와는 달리Component에는 몇 가지 주의사항이 있습니다.PureComponent단, 문서에서는React.PureComponentshouldComponentUpdate():

...물건을 얕게 비교할 뿐입니다.여기에 복잡한 데이터 구조가 포함되어 있는 경우, 더 깊은 차이에 대한 잘못된 부정(false-negative)이 발생할 수 있습니다.

...컴포넌트 서브트리 전체의 프로펠러 업데이트를 생략합니다.모든 하위 구성 요소도 "순수"인지 확인하십시오.

사용방법PureComponent경우에 따라서는, 애플리케이션의 퍼포먼스를 향상시킬 수 있습니다.게다가, 그것은 당신을 계속 유지하도록 강요한다.state그리고.props오브젝트는 가능한 한 심플하거나 더 나은 불변성이므로 앱 구조를 단순화하고 깔끔하게 만들 수 있습니다.

당신의 질문을 제대로 이해했는지 모르겠지만 가상 돔과 실제 돔이 다를 때만 반응합니다.

그리고 Jyothi가 답변에서 언급했듯이 렌더 메서드는 설정 상태 함수로 전달된 값에 관계없이 호출되지만 렌더링은 이 렌더 메서드가 반환하는 값에 따라 달라집니다.

기능 컴포넌트에서는 호출setState()같은 값의 경우 렌더링은 발생하지 않지만 클래스 컴포넌트에서는 렌더링됩니다.https://dev.to/sunflower/reactjs-if-it-is-setting-a-state-with-the-same-value-will-the-component-be-re-rendered-5g24

여기서는 가상(React) 렌더링에 대해 설명하겠습니다.브라우어 렌더링은 상태(또는 좀 더 정확하게 말하면 유효 DOM)가 변하지 않는 한 기능 구성요소나 클래스 구성요소에서 어떤 경우에도 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/41322523/reactjs-calling-setstate-with-same-parameter

반응형