새 URL을 푸시할 때 React 구성 요소 렌더가 여러 번 호출됩니다.

새 URL을 푸시할 때 React 구성 요소 렌더가 여러 번 호출됩니다.

사용자가 왼쪽이나 오른쪽을 누르면 사진이 바뀌는 PhotoViewer를 만들고 있습니다.React, Redux, react-router, react-router-redux.오른쪽을 때 저는 가지 . 즉, 저는 이 을 업데이트 할 때 합니다.this.context.replace() 보고 사진을 하기 위한 을 보냅니다.this.props.dispatch(setPhoto(photoId))디버깅을 위해 상태 변경에 가입하고 있습니다.

위의 각 행은 새로운 상태 변경을 트리거합니다.을 된다.currentlyViewedPhoto하기 때문에, 은 react-syslog-syslogx의 URL을 갱신합니다.첫가 됩니다.render을 사용하다 번째 의 리렌더링 render을 사용하다★★★★★★★★★★★★★★★★★?뭇매를 맞다

class PhotoViewer extends Component {
  pressLeftOrRightKey(e) {
    ... code to detect that left or right arrow was pressed ...

    // Dispatching the action triggers a state update
    // render is called once after the following line
    this.props.dispatch(setPhoto(photoId)) // assume photoId is correct

    // Changing the url triggers a state update
    // render is called twice
    this.context.router.replace(url) // assume url is correct
    return
  }

  render() {
    return (
      <div>Test</div>
    )
  }
}

function select(state) {
  return state
}

export default connect(select)(PhotoViewer)

렌더가 세 번 호출되는 것이 정상입니까?리액트는 DOM을 3회 분산해야 하기 때문에 과잉 살상인 것 같습니다.변한 게 없으니 별로 상관없을 것 같아요.저는 이 툴셋을 처음 접하기 때문에 이 문제에 대해 궁금한 점이 있으면 언제든지 질문해 주십시오.

3개의 다른 단계에서 상태를 설정할 경우 컴포넌트도 3회 렌더됩니다.

setState()는 조건부 렌더링 로직이 show ComponentUpdate()에 구현되지 않는 한 항상 재렌더를 트리거합니다.

(소스)

show Component Update() 로 로직을 구현하여 성능 문제가 발생할 경우 불필요한 재렌더를 방지할 수 있습니다.

나는 이것이 정상이라고 가정할 것이다.눈에 띄는 성능 문제가 없다면 걱정 안 하셔도 됩니다.성능이 문제가 되기 시작하는 경우 특정 상태 변경으로 렌더링된 구성요소가 변경되지 않을 것이 확실하다면 수명 주기 방법을 재정의하는 것을 검토할 수 있습니다.

편집: 확장도 검토할 수 있습니다.React.PureComponentReact.Component한 경우shouldComponentUpdate라이프 사이클 방식자세한 것은 이쪽.

오래된 질문입니다만, 저도 이 문제에 주목했습니다.도날드의 대답에서 언급한 것처럼, 정상인 것 같습니다.특정 사례를 트러블 슈팅하기 위해 세 가지를 시도했습니다.

• 중복 메시지의 원인이 React DevTools 플러그인인지 확인했습니다.
• 그것이 문제인지 다른 브라우저를 확인했습니다.
• 간단한 컴포넌트에서 발생하는지를 확인하기 위해 간단한 테스트를 작성했습니다.

처음 두 가지 방법은

React DevTools 플러그인을 사용하지 않도록 설정해도 콘솔에 로그인한 메시지 수는 변경되지 않았습니다.

브라우저 변경도 효과가 없었다.나는 크롬과 파이어폭스를 시도했다.

세 번째 방법

가장 단순한 구성 요소라도 라이프 사이클 방법을 여러 번 호출하는 것 같습니다.

두 개의 파일을 지정하면App.js그리고.components/TestComponent.js다음과 같습니다.

// App.js

import React from 'react';
import './App.css';
import Test from './components/TestComponent';

function App()  {
  console.log('App render');
  return ( 
      <div>
        <Test />
      </div>
  
  );
}

export default App;

// ./components/TestComponent.js

import React, { Component } from 'react';


class Test extends Component {
  constructor(props) {
    console.log('Test constructed');
    super(props);
    
  }

  componentDidMount() {
    console.log('Test mounted');
  }

  componentDidUpdate() {
    console.log('Test updated');
  }

  render() {
    console.log('Test rendered');
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default Test;

검사의 수명 주기 방법을 여러 번 호출합니다.

메모들

• 앱을 설정하기 위해 create-react-app을 사용했습니다.
• react 버전은 16.13.1입니다.

결과 및 토론.

와 함께yarn start콘솔에 다음 메시지가 나타납니다.

App render
TestComponent.js:7 Test constructed
TestComponent.js:7 Test constructed
TestComponent.js:20 Test rendered
TestComponent.js:20 Test rendered
TestComponent.js:12 Test mounted

적어도 나한테는yarn개발 빌드가 최적화되어 있지 않고 실행 중이라는 점에 주의해 주십시오.yarn build그리고 나서 그것을 서비스합니다.python -m http.server --directory build는 중복된 메시지가 없는 페이지를 제공합니다.

왜 2개가 아닌 3개의 렌더링을 받는지는 말할 수 없습니다.앱을 구축해보고 프로덕션 구축에서 문제가 지속되는지 확인해보자는 제안입니다.

그래도 문제가 발생할 경우 Donald의 제안에 따라 로직을 구현할 수도 있습니다.shouldComponentUpdate.

> v16.3 을 사용하고 있는 경우는,<React> 를 삭제해 주세요.Strict Mode > 정상적으로 동작합니다.

왜? 클래스 컴포넌트의 경우 v16.3, 훅의 경우 v16.8부터 React는 <React>를 도입했습니다.[ Strict Mode ]는 렌더링 단계를 여러 번 호출할 수 있기 때문에 Concurrent React (근래에는 )로의 이행을 보다 개발자에게 용이하게 하기 위해 사용합니다.

다음 기사는 읽을 가치가 있습니다.

두 번 렌더링된 구성 요소 반응

리액트 컴포넌트가 2회 렌더링되어 미칠 것 같다

잠깐만요, <React>를 사용하고 있지 않습니다.Strict Mode >?!

주의: 이는 개발 환경에만 적용됩니다.

<React>를 삭제합니다.Strict Mode >는 내 케이스에서도 동작했다.

제거할 수 있습니다.React.StrictMode이전:

   root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

수신인: 이전:

   root.render(
        <App />
    );

파일 디폴트index.js

언급URL : https://stackoverflow.com/questions/35136836/react-component-render-is-called-multiple-times-when-pushing-new-url