React - 라이프 사이클 구성 요소가 동일한 데이터를 두 번 렌더링하지 못하도록합니다. WillReceiveProps & componentDidMount

Question

구성 요소에 대한 빠른 질문. 일부 매개 변수는

이이 위대한 작품을 변경하면 데이터를 업데이트 -

• componentDidMount() 구성 요소가 먼저
• componentWillReceiveProps (nextProps)를 렌더링 될 때 데이터를 검색 -for : 저는 두 수명주기 방법을 사용하고 있습니다. 그러나 구성 요소로 페이지를 새로 고치면 두 라이프 사이클 메소드 모두 충분할 때 실행됩니다. 페이지의 데이터는 여전히 정확하지만 조금 비효율적 인 것으로 보입니다. 가능한 경우이를 이들을 라이프 사이클에 결합 할 수 있습니까?

  아래 예제에서는 페이지를 새로 고치면이 fetchTest() 두 번 호출됩니다. componentDidMount를 제거하면 사용자가 페이지를 새로 고치면 데이터가 처음로드되지 않습니다.

  fetchTest()를 사용하는 방법에 대한 아이디어는 사용자가 구성 요소에 어떻게 접근하든 관계없이 한 번 호출됩니다.

  componentDidMount() { 
      fetchTest(this.props.params.id); 
      // for initial component render 
      } 
  
      componentWillReceiveProps(nextProps) { 
      fetchTest(nextProps.params.id); 
      // for when (params.id) is changed. data within component is updated 
      } 
  

Answer 1

당신은 아마도 귀하의 질문은 기묘하게 표현되어

componentWillReceiveProps(nextProps) { 
    if (nextProps.params.id !== this.props.params.id) { 
    fetchTest(nextProps.params.id); 
    } 
}