ReactJS - "setState"가 호출될 때마다 렌더가 호출됩니까?

ReactJS - "setState"가 호출될 때마다 렌더가 호출됩니까?

는 React할 ?setState()★★★★★★★★★★★★★★★★?

그렇다면 왜?상황이 바뀌었을 때 리액트는 필요한 만큼만 제공한다는 생각인 줄 알았어요.

예에서는 onClick 을 하기 때문에 시 두.state「 」:

this.setState({'test':'me'});

렌탈이 일어날 거라곤 예상했는데state이치노

다음은 JS Fielle 및 임베디드 코드입니다.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

react는 setState가 호출될 때마다 모든 컴포넌트와 서브 컴포넌트를 재렌더합니까?

디폴트 - yes.

boolean should Component Update(개체 nextProps, 객체 nextState)라는 메서드가 있습니다.각 컴포넌트는 이 메서드를 가지며 컴포넌트를 업데이트(렌더 기능을 실행해야 합니까?)를 결정합니다.상태를 변경하거나 부모 컴포넌트에서 새로운 소품을 전달할 때마다.

컴포넌트에 대한 should ComponentUpdate 메서드의 구현을 직접 작성할 수 있지만 기본 구현은 항상 true를 반환합니다. 즉, 항상 렌더 함수를 다시 실행합니다.

공식 문서 http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate에서 인용

기본적으로는 상태가 변환될 때 미묘한 버그를 방지하기 위해 항상 true를 반환하지만 항상 상태를 불변으로 취급하고 render()의 소품 및 상태에서 읽기 전용으로 취급하는 경우 이전 소품 및 상태를 대체하는 구현으로 wake Component Update를 덮어쓸 수 있습니다.s.

질문의 다음 부분:

그렇다면 왜?상황이 바뀌었을 때 리액트는 필요한 만큼만 제공한다는 생각인 줄 알았어요.

「렌더」라고 하는 것은, 다음의 2개의 스텝이 있습니다.

1. Virtual DOM 렌더링: 렌더 메서드가 호출되면 구성 요소의 새 가상 돔 구조가 반환됩니다.앞서 설명한 바와 같이 이 렌더 메서드는 setState()를 호출할 때 항상 호출됩니다.왜냐하면 기본적으로는 componentUpdate는 항상 true를 반환하기 때문입니다.따라서 기본적으로는 React에는 최적화가 없습니다.

2. 네이티브 DOM 렌더링:Respect는 가상 DOM에서 변경된 실제 DOM 노드를 필요한 만큼만 브라우저의 실제 DOM 노드를 변경합니다.이것은 실제 DOM 변환을 최적화하고 React를 고속화하는 뛰어난 React 기능입니다.

아니요, 상태가 바뀌어도 리액트는 모든 것을 렌더링하지 않습니다.

• 컴포넌트가 더러워질 때마다(상태가 변화할 경우), 그 컴포넌트와 그 하위 컴포넌트는 재렌더됩니다.이것은, 어느 정도, 가능한 한 작게 재렌더하는 것입니다.렌더가 호출되지 않는 유일한 경우는 이론적으로 아무것도 다시 렌더링할 필요가 없는 다른 루트로 브랜치를 이동하는 경우입니다.예에서는 " " 입니다.TimeInChild is is is is is of of of of of of of of of of of의 입니다.Main에 '아까', '아까', '아까', '아까', '아까', '아까'의Main★★★★★★★★★★★★★★★★★★.

• 반응하다setState컴포넌트를 더티로 마크합니다(즉, 다시 컴포넌트를 재포장할 필요가 있습니다.해야 할 은, 「이것들」은 「이것들」은 「.render컴포넌트의 메서드가 호출되고 실제 DOM은 출력이 현재 DOM 트리와 다른 경우에만 업데이트됩니다(예를 들어 가상 DOM 트리와 문서의 DOM 트리 간의 차이).예에서는, 「 」가 만,state데이터는 변경되지 않았고, 마지막 변경 시각도 변경되었기 때문에 Virtual DOM은 문서의 DOM과 달라지기 때문에 HTML이 갱신됩니다.

여기에 기재되어 있는 다른 답변에도 기재되어 있습니다만, 컴포넌트는 다음 중 하나를 실시합니다.

• shouldComponentUpdate나 이 바뀌었을

• 이미 구현되어 있는 Pure Component 확장으로 전환합니다.shouldComponentUpdate얄팍한 비교를 위해 내부적으로 방법을 사용한다.

는 '보다 낫다'를 사용한 입니다.shouldComponentUpdate이는 이 단순한 사용 사례 및 데모 목적으로만 작동합니다.이 기능을 사용하면 클릭할 때마다 구성요소가 다시 렌더링되지 않고 처음 표시될 때와 한 번 누를 때 렌더링됩니다.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

,, 그, 그, 름, 그, yes, yes, yes, yes, yes.render() setState, 단,shouldComponentUpdatefalse.

리액트 훅을 사용하는 경우는, 허가된 회답이 없어졌다고 생각됩니다(원시적인 값은 이 회답의 코멘트를 참조해 주세요).이 코드 샌드박스에서 상태가 동일한 값으로 설정되면 클래스 구성 요소가 다시 렌더링되는 것을 알 수 있습니다. 함수 구성 요소에서 상태를 동일한 값으로 설정해도 다시 렌더링되지 않습니다.

https://codesandbox.io/s/still-wave-wouk2?file=/src/App.js

"업데이트 손실"의 또 다른 이유는 다음과 같습니다.

• static get Derived State From Props가 정의되어 있는 경우 공식 문서http://https://reactjs.org/docs/react-component.html#updating에 따라 업데이트프로세스마다 다시 실행됩니다.
• 따라서 이 상태 값이 처음에 소품에서 나온 경우 업데이트 때마다 덮어씁니다.

문제가 있는 경우 U는 업데이트 중 상태 설정을 피할 수 있으므로 다음과 같이 상태 매개 변수 값을 확인해야 합니다.

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

또 다른 솔루션은 초기화된 속성을 스테이트에 추가하고 이를 처음 설정하는 것입니다(스테이트가 null이 아닌 값으로 초기화되어 있는 경우).

18세 이상 대응

React 18부터는 모든 상태 업데이트가 자동으로 배치되어 여러 상태 업데이트를 단일 렌더로 그룹화하여 성능을 향상시킵니다.

따라서 상태를 업데이트하면 React는 항상 이러한 업데이트를 그룹 업데이트로 일괄 처리하려고 하므로 렌더링 횟수가 콜 수보다 적습니다.후크를 사용해도 동작은 동일합니다.

Automatic batching for React 18 안내방송에서 매우 긴 설명을 볼 수 있습니다.

반응 17 이하

React 17 이하에서는 React 이벤트 핸들러 내의 업데이트만 일괄 처리됩니다.약속, setTimeout, 네이티브이벤트 핸들러 또는 기타 이벤트 내의 업데이트는 기본적으로 React에서 배치되지 않았습니다.

모든 컴포넌트는 아닙니다.

그stateAPP 전체의 상태 폭포의 근원처럼 보입니다.

따라서 setState가 호출한 위치에서 변경이 이루어집니다.의 나무renders거기서 전화가 걸려옵니다.순수 컴포넌트를 사용했다면render건너뜁니다.

여기에서 잘 설명한 답변에 관계없이 소품이나 상태를 변경한 후 예상되는 변화가 나타나지 않는 다른 이유가 있을 수 있습니다.

주의:event.preventDefault();상태 \ 소품 변경으로 재확인을 원하는 코드에서 이 문 뒤에 취소 가능한 이벤트가 취소되기 때문입니다.

현재 상태 값과 새 상태 값을 비교한 후에만 setState()를 사용할 수 있으며 두 값이 다릅니다.

언급URL : https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called