반응 수명 주기 방법 이해

반응 수명 주기 방법 이해

---

저는 React.js의 초보자이고 React 라이프사이클 메소드의 여러 메소드를 이해하기 위해 열심히 노력하고 있습니다.

지금까지 저를 혼란스럽게 만드는 것이 있습니다.

1)

지금까지 내가 이해의 차이 componentWillUpdate와는 componentWillReceiveProps그가되어 componentWillReceiveProps부모가 소품을 변경하고 우리가 setState를 (이 아이의 내부 setState를 사용할 수 있습니다 때 호출됩니다 componentWillReceiveProps).

예: react-table-sorter-demo

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}};
  },
  handleSourceChange: function(source) {
    this.setState({source: source});
  },
  render: function() {
    return (
      <div>
        <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
        <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
      </div>
    );
  }
});

TableSorter에는

componentWillReceiveProps: function(nextProps) {
    // Load new data when the dataSource property changes.
    if (nextProps.dataSource != this.props.dataSource) {
      this.loadData(nextProps.dataSource);
    }
  }

즉 this.state.source, 변경할 때 componentWillReceivePropsTableSorter에서 호출 될 것으로 예상 합니다.

그러나이 componentWillUpdate경우 사용하는 방법을 잘 이해하지 못합니다 . 정의는 다음 componentWillUpdate과 같습니다.

componentWillUpdate(object nextProps, object nextState)

부모에서 자식으로 nextState를 어떻게 전달할 수 있습니까? 아니면 내가 틀렸을 수도 있습니다. nextState가 상위 요소에서 전달되었습니까?

2) 방법 componentWillMount은 공식 문서에서

클라이언트와 서버 모두에서 초기 렌더링이 발생하기 직전에 한 번 호출됩니다.

이 경우 이 메서드에서 setState를 사용하면 처음에 한 번만 호출되기 때문에 getInitialState를 재정의합니다. 이 경우 getInitialState 메소드에서 매개변수를 설정하는 이유는 무엇입니까? 이 특별한 경우에는 다음이 있습니다.

  getInitialState: function() {
    return {
      items: this.props.initialItems || [],
      sort: this.props.config.sort || { column: "", order: "" },
      columns: this.props.config.columns
    };
  },
  componentWillMount: function() {
    this.loadData(this.props.dataSource);
  },
  loadData: function(dataSource) {
    if (!dataSource) return;

    $.get(dataSource).done(function(data) {
      console.log("Received data");
     this.setState({items: data});
     }.bind(this)).fail(function(error, a, b) {
      console.log("Error loading JSON");
     });
  },

항목은 처음에 재정의 items: this.props.initialItems || []되며 getInitialState 메서드에서 여전히 필요한 이유는 무엇입니까?

내 설명을 이해할 수 있기를 바라며, 힌트가 있으면 알려주십시오.

---

1) React의 업데이트 수명 주기 componentWillReceiveProps전에 호출 componentWillUpdate됩니다. 당신이 componentWillReceiveProps부를 수 있도록 하는 것이 맞습니다 setState. 반면 componentWillUpdate에 상태 변경에 응답해야 할 때 사용할 콜백입니다.

props와 state의 근본적인 차이점은 state가 구성 요소에 대해 비공개라는 것입니다. 그렇기 때문에 부모 구성 요소나 다른 누구도 구성 요소의 상태(예: call setState)를 조작할 수 없습니다 . 따라서 상위-하위 구성 요소 관계의 기본 워크플로는 다음과 같습니다.

• 부모가 자식에게 새 소품을 전달합니다.
• 자식은 'componentWillReceiveProps'에서 새 소품을 처리 setState하고 필요한 경우 호출 합니다.
• 자식은 'componentWillUpdate'에서 새 상태를 처리하지만 구성 요소가 상태 저장이면 'componentWillReceiveProps'에서 props를 처리하는 것으로 충분합니다.

2) 차이점을 설명하기 위해 꽤 좋은 코드 예제를 제공했습니다. 에 설정된 기본값 getInitialState은 초기 렌더링에 사용됩니다. 의 loadData호출은 componentWillMount성공할 수도 있고 실패할 수도 있는 AJAX 요청을 시작합니다. 또한 완료하는 데 얼마나 걸릴지 알 수 없습니다. AJAX 요청이 완료되고 setState새 상태로 호출될 때까지 구성 요소는 DOM에서 기본값으로 렌더링됩니다. 그렇기 때문에 에서 기본 상태를 제공하는 것이 합리적입니다 getInitialState.

참고: React Component Lifecycle 이해하기 기사가 React의 수명 주기 방법을 이해하는 데 큰 도움이 됩니다.

---

React 컴포넌트의 4단계

초기화

설치

업데이트

마운트 해제

다음은 다양한 방법에 대한 간략한 설명입니다.

라이프사이클

구성 요소의. 반응형 코드를 작성하려면 수명 주기 메서드를 잘 이해하고 있어야 합니다.

장착 단계의 방법:

구성 요소의 인스턴스가 생성되고 DOM에 렌더링될 때 시작됩니다.

1. constructor(props)- 컴포넌트가 처음 초기화될 때 호출됩니다. 이 메서드는 한 번만 호출됩니다.
2. componentWillMount()- 컴포넌트가 마운트될 때 호출됩니다.
3. render()-컴포넌트가 렌더링될 때 호출됩니다.
4. componentDidMount()- 컴포넌트의 장착이 완료되면 호출됩니다.

업데이트 단계의 방법:

구성 요소의 속성이나 상태가 변경될 때 시작됩니다.

1. componentWillReceiveProps(nextProps)- 컴포넌트가 업데이트되고 새로운 props를 받을 때 호출됩니다.
2. shouldComponentUpdate(nextProps, nextState)- props를 받은 후 호출되며 업데이트 예정입니다. 이 메서드가 false를 반환하면 componentWillUpdate(), render() 및 componentDidUpdate()가 실행되지 않습니다.
3. componentWillUpdate(nextProps, nextState)- 컴포넌트가 업데이트되려고 할 때 호출됩니다.
4. render()- 구성 요소가 다시 렌더링될 때 호출됩니다.
5. componentDidUpdate(prevProps, prevState)- 구성 요소가 업데이트를 완료하면 호출됩니다.

마운트 해제 단계의 방법:

구성 요소가 DOM에서 제거될 때 시작됩니다.

1. componentWillUnmount()- 구성 요소가 마운트 해제되기 직전에 호출됩니다.

참조: https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

---

React Component Lifecycle을 이해하기 위해 읽은 최고의 기사:

React 컴포넌트 라이프사이클 이해하기

---

다음은 React 라이프사이클 메소드의 놀라운 다이어그램입니다( Dan Abramov 제작 ).

이 다이어그램의 대화형 버전

---

구성 요소 수명 주기 메서드는 클래스 기반 구성 요소 내부에서 선택적으로 정의할 수 있는 기능입니다. 이러한 메서드를 구현하기로 결정하면 구성 요소 수명 주기 동안 특정 지점에서 React에 의해 자동으로 호출됩니다.

구성 요소가 생성되어 DOM 또는 브라우저에 표시 this.setState()되며 구성 요소가 다시 렌더링되고 이론적으로 특정 시점에 구성 요소가 DOM에서 완전히 제거되고 내용 표시가 중지되는 것과 같은 작업을 수행할 수 있습니다. 화면에.

일련의 전체 이벤트를 구성 요소 수명 주기라고 합니다.

이러한 수명 주기 메서드는 수명 주기 중 매우 다른 시간에 호출됩니다.

이 constructor(props)함수는 선택적으로 정의할 수 있는 함수이며 그렇게 하면 구성 요소의 새 인스턴스가 생성될 때 자동으로 호출됩니다.

가 render()되지 선택적으로, 우리가 그것을 정의 할 필요가있다 방법은. 이 render()메서드는 수명 주기 함수이며 구성 요소의 수명 주기 중 특정 시점에서 호출됩니다.

constructor(props)호출되는 것으로 시작 하면 render()메서드가 호출되고 일정량의 jsx를 반환하고 콘텐츠가 화면에 표시됩니다.

그런 다음 다른 시점에 호출되는 또 다른 일련의 수명 주기 메서드가 있습니다.

먼저 브라우저 화면에 컴포넌트가 나타난 직후에 호출된 라이프사이클 메소드가 호출 componentDidMount()됩니다. 즉, 클래스 내부에 함수 를 정의하고 메서드 constructor(props)바로 위에 함수 render()를 정의하면 componentDidMount()다음과 같이 호출되는 메서드를 정의할 수 있습니다 .

componentDidMount() {

}

render() {

}

이 함수는 구성 요소가 화면에 처음 렌더링될 때 한 번 자동으로 호출됩니다. 구성 요소가 처음 나타날 때 설정을 위해 내부에 코드를 삽입하거나 초기 데이터 로드 또는 한 번에 수행할 수 있는 다양한 작업을 수행할 수 있습니다.

해당 메서드가 호출된 후 구성 요소는 주변에 앉아서 업데이트를 기다립니다. 업데이트는 의 형태로 제공 this.setState()됩니다.

완료되면 구성 요소는 이라는 다른 수명 주기 메서드를 호출하는 자체를 업데이트하거나 다시 렌더링합니다 componentDidUpdate(). 해당 기능을 정의하면 구성 요소가 자체 업데이트될 때마다 자동으로 호출됩니다.

구성 요소는 주변에 앉아서 다른 업데이트와 componentDidUpdate()다시 또는 수많은 시간을 기다립니다 .

어느 시점에서 우리는 componentDidUpdate()구성 요소 를 중지하고 싶을 수 있으며 구현하는 곳 에서 구성 요소 componentWillUnmount()를 정리할 때 호출하려는 메서드입니다.

ReferenceURL : https://stackoverflow.com/questions/29873730/react-lifecycle-methods-understanding