ReactJS- "setState"가 호출 될 때마다 render가 호출되는 이유

질문 : ReactJS- "setState"가 호출 될 때마다 render가 호출됩니까?

---

setState() 가 호출 될 때마다 모든 구성 요소와 하위 구성 요소를 다시 렌더링합니까?

그렇다면 그 이유는 무엇입니까? 저는 React가 상태가 변경 될 때 필요한만큼만 렌더링된다는 생각을했습니다.

state 를 동일한 값으로 설정하기 때문에 후속 클릭에서 상태가 변경되지 않더라도 텍스트를 클릭하면 두 클래스가 다시 렌더링됩니다.

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

state 데이터가 변경된 경우에만 렌더링이 발생할 것으로 예상했습니다.

다음은 JS Fiddle 및 포함 된 스 니펫과 같은 예제 코드입니다.

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가 호출 될 때마다 모든 구성 요소와 하위 구성 요소를 다시 렌더링합니까?

기본적으로-예.

부울 shouldComponentUpdate (object nextProps, object nextState) 메서드가 있으며 각 구성 요소에는이 메서드가 있으며 "구성 요소 업데이트 ( 렌더 기능 실행)"를 결정해야합니다. 상태 를 변경하거나 부모 구성 요소에서 새 소품을 전달할 때마다.

구성 요소에 대한 shouldComponentUpdate 메서드의 자체 구현을 작성할 수 있지만 기본 구현은 항상 true를 반환합니다. 즉, 항상 렌더링 함수를 다시 실행합니다.

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

 

기본적으로 shouldComponentUpdate는 상태가 제자리에서 변경 될 때 미묘한 버그를 방지하기 위해 항상 true를 반환합니다. 이전 소품 및 상태를 대체 항목과 비교하는 구현입니다.

 

질문의 다음 부분 :

그렇다면 그 이유는 무엇입니까? 저는 React가 상태가 변경되었을 때 필요한만큼만 렌더링된다는 생각을했습니다.

 

"렌더링"이라고 부르는 두 단계가 있습니다.

1. 가상 DOM 렌더링 : render 메서드가 호출되면 구성 요소 의 새로운 가상 DOM 구조를 반환합니다. 앞서 언급 했듯이이 렌더링 메서드는 setState () 를 호출 할 때 항상 호출 됩니다. shouldComponentUpdate는 항상 기본적으로 true를 반환하기 때문입니다. 따라서 기본적으로 React에는 최적화가 없습니다.
2. 네이티브 DOM 렌더링 : React는 Virtual DOM에서 변경된 경우에만 브라우저의 실제 DOM 노드를 변경하고 필요한만큼만 변경합니다. 이것은 실제 DOM 변형을 최적화하고 React를 빠르게 만드는 훌륭한 React의 기능입니다.

 

 

출처 : https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called