React.StrictMode 및 fabric.js의 Canvas 인스턴스를 사용하여 다시 렌더링

Question

선택 가능해야 하는 모양을 인스턴스화하는 패브릭 캔버스와 버튼을 만들고 있습니다. 다음 상황에서 구성 요소가 두 번 다시 렌더링되는 이유를 이해할 수 없습니다. 따라서 원단 형태를 선택할 수 없습니다. 그러나 index.tsx 파일에서 제거하면 렌더링이 한 번만 발생하고 모양을 선택할 수 있습니다. 제거할 수는 있지만 이것이 최선의 해결책은 아니라고 생각합니다. 다음은 데모입니다: const{Fragment,StrictMode,useEffect,useRef}=React;const{cr

P粉850680329 · Answer

질문

React에서 useEffect가 두 번 실행되는 이유와 이를 처리하는 방법은 무엇입니까? 이 질문에는 이런 일이 발생하는 이유와 일반적인 해결책을 설명하는 좋은 답변이 있습니다.

솔루션

귀하의 경우에는 인스턴스화된 캔버스를 정리해야 합니다. 저는 Fabric에 익숙하지 않지만 문서를 읽어보면 dispose 방법 이 적절해 보입니다.

정리를 수행하는 useEffect 返回一个调用上述方法的函数。从链接的问题中可以看出，从 useEffect 함수를 반환해야 하는 것은 좋은 습관입니다. 아래에 실제 예제도 있습니다:

으아아아 으아아아