React에서 클래스의 컨스트럭터에서 setState() 함수를 사용하면 어떻게 됩니까?JS 또는 리액트 네이티브?

React에서 클래스의 컨스트럭터에서 setState() 함수를 사용하면 어떻게 됩니까?JS 또는 리액트 네이티브?

그냥 궁금해서 그러는데, 만약 내가 이걸 쓰면 어떻게 되는지 알고 싶어.setState()React Native 또는 ReactJS 클래스의 생성자 함수예를 들어 다음과 같습니다.

constructor(props) {
  super(props);
  this.setState({title: 'new title'});
}

리액트의 라이프 사이클은 어떻게 될까요?

---

리액트 안에 있는 코드를 못 읽었어요그렇게 쓰면 좀 상할까 봐 걱정이에요.

뭐?setState기본적으로는 컨스트럭터에서 필요 없는 논리들을 실행하는 것입니다.

갈 때state = {foo : "bar"}javascript 객체에 무언가를 할당하기만 하면 됩니다.state당신이 다른 어떤 반대처럼요?(그것뿐입니다)state참고로 모든 컴포넌트에 대해 로컬에 있는 일반 객체입니다.)

사용할 때setState()오브젝트에 할당하는 것 외에state반응 또한 구성 요소와 그 모든 자식들을 재렌더링합니다.컴포넌트가 렌더링되지 않았기 때문에 컨스트럭터에는 필요 없습니다.

오류 메시지는 다음과 같습니다.Uncaught TypeError: Cannot read property 'VARIABLE_NAME' of null

다음의 2개의 jsfiddle 스니펫을 참조해 주세요.

사례 1) 현용 솔루션 jsfiddle

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        name: 'world'
      } 
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

사례 2) 솔루션이 작동하지 않음

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.setState({
        name: 'hello'
      });
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

이 경우 -constructor(starts setState) -render(fails - state에 속성 'name'이 아직 없기 때문에) -name이 state에 추가됩니다(그러나 너무 늦었습니다.-이미 렌더링되었습니다).

결론:

내 경험칙, 안에constructor사용하다this.state = {}직접, 다른 장소에서 사용this.setState({ });

컨스트럭터:Constructor는 상태를 초기화하기 위해 사용됩니다.

상태 : 로컬 상태를 포함하는 컴포넌트에는 "this.state"라는 속성이 있습니다.

SetState: 리액트컴포넌트에는 setState Calling "this"라고 불리는 메서드가 있습니다.setState"는 React가 응용 프로그램을 다시 렌더링하고 DOM을 업데이트합니다.또한 setState에서 prevState를 추적할 수 있습니다.컨스트럭터에서 setState를 사용하면 다음과 같은 오류가 발생합니다.마운트 또는 마운트 구성 요소만 업데이트할 수 있습니다.이는 보통 마운트 해제된 컴포넌트에서 setState()를 호출했음을 의미합니다.

React는 라이프 사이클이벤트에서 setState 사용을 제한하지 않았습니다.상태 업데이트를 위한 공식 문서 링크 반응

컨스트럭터 외부에서 직접 스테이트에 액세스할 수 없다고 합니다.setState는 임의의 장소에 콜할 수 있습니다.

기술적으로는 setState는 기존 상태를 새로운 값으로 갱신하는 것을 의미합니다.이러한 값은 다음 업데이트사이클에서 batch 프로세스를 통해 리액트합니다.따라서 setState 직후 console.log of state를 사용하면 오래된 값이 됩니다.

이제 컨스트럭터에서 setState를 호출하면 어떻게 되는지에 초점을 맞춥니다.React는 setState에 전달된 새로운 상태로 일괄 처리된 코드 조각을 준비하고 업데이트를 트리거합니다.

리액션은 당신이 이것을 하는 것을 막지는 않았지만, 그렇게 하면 문제가 생길 수 있다는 것을 알고 있기 때문에 당신에게 좋은 메시지를 남깁니다.

경고: setState(...): 마운트 또는 마운트 구성 요소만 업데이트할 수 있습니다.이는 보통 마운트 해제된 컴포넌트에서 setState()를 호출했음을 의미합니다.이건 수술 금지야컴포넌트의 코드를 확인해 주세요.

리액션은 컴포넌트의 추가 로드를 진행하지만 업데이트는 이 배치에 반영되지 않습니다.

결론: 그렇게 하려고 하면 오류가 발생하지 않을 수 있지만, 이러한 업데이트는 트리거되어도 no를 반영하기 때문에 바람직하지 않은 동작을 감수해야 합니다.

언급URL : https://stackoverflow.com/questions/34961853/what-will-happen-if-i-use-setstate-function-in-constructor-of-a-class-in-react