리액션 후크에서 구성 요소는 설정 상태를 호출하지 않아도 작동함

리액션 후크에서 구성 요소는 설정 상태를 호출하지 않아도 작동함

내 리액션 후크 코드야

function State(){
  var [msg,set_msg]=React.useState("hello") //not rendered, just to force render
  var [data,set_data]=React.useState({version:1})
  function onClick(){
set_msg(x=>x+'x') //just to force render
data.version+=1   //changing state in place, but it still updates
  }
  return <div>
version={data.version}
<button {...{onClick}}>click</button>
  </div>
}
ReactDOM.render(<State />,document.querySelector('#root') );

  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel" src="index.js"></script>  
    
<div id=root></root>
  

내 질문은: 왜 그것이 작동되는가?코드는 set_data를 설정하지 않고, 단지 제자리에 있는 버전을 변경한다.

개체를 상태 값으로 사용하고 있으므로 상태를 업데이트하지 않고 개체의 속성을 변경할 수 있다.이것은 국가가 모든 값이 아니라 개체에 대한 참조를 저장하기 때문에 효과가 있다.

제자리에 있는 상태를 업데이트해야 함)data.version+=1(), 어떤 변화도 보이지 않도록 구성 요소를 강제로 재조정하지는 않을 것이지만, 데이터는 여전히 변경되었을 것이다.이전 라인에서 상태 변경으로 렌더링을 강제 실행하므로(OnClick 기능이 완료될 때까지 실행되지 않음), 구성 요소는 데이터의 변경 사항을 반영하십시오.

요약하자면, 이것은 실제로 데이터를 저장하고 돌연변이를 하는 데 효과가 있다; 그것은 실제로 구성요소를 다시 렌더링하지 않을 것이다.구성 요소가 데이터 변경을 반영하도록 업데이트되는 유일한 이유는 이전 라인에서 강제로 업데이트하기 때문이다.

참조URL: https://stackoverflow.com/questions/65711193/in-react-hooks-component-works-even-without-calling-set-state