모달 대화 상자 내에서 스크롤 가능한 양식 (50 개 이상의 행)이 자체 페이지에서 렌더링되는 동일한 양식보다 훨씬 느림

Question

성능 문제가 발생하여 해결 방법이 있는지 궁금합니다.

이

때때로이 테이블이 많은 (50+) 행, 그래서 나는 react-를 사용하기 시작했습니다했습니다

나는 데이터베이스 테이블에 사용자 편집 행을 할 수있는 React.js 응용 프로그램이 가상화 된 목록.

(그것의 자신의 페이지에있는 양식 스크롤 반환 한)

: 나는 그것을 자신의 페이지에있는 양식을 넣을 때

어느 쪽의 반응 가상화, 렌더링 성능 (중 처음 또는 스크롤하는 동안)없이 또는 괜찮습니다

하지만 난 모달 대화 등 https://react.semantic-ui.com/modules/modal#modal-example-modal

에서 같은 양식을 넣을 경우는 unusably 느려집니다

모달 뒤에 구성 요소가 예기치 않게 렌더링 여부를 제가 확인했습니다

(모달 내 양식 스크롤), 그들이하지 않은 것을 확인했다. 내 백업 솔루션은 별도의 페이지에 양식을 넣는 것이지만이 방법을 사용하여 반응 및 반응 가상화 성능을 더 잘 이해할 수 있으므로 모든 포인터에 감사드립니다.

Answer 1

빠른 스크린 샷은 생산 모드에서 반응을 사용하고 있습니다. 두 번째, 느린 것은 개발 모드에서 React를 보여줍니다. (스크린 샷에 react-dom.production.mind.js과 react-dom.development.js이 있습니다.) 이는 여러분이보고있는 성능 차이를 쉽게 설명 할 수 있습니다.

여기에서 자세히 알아보기 : https://reactjs.org/docs/optimizing-performance.html#use-the-production-build