programing

프레임워크 셀 렌더러를 사용한 Ag 그리드가 스토어 변경 시 계속 재렌더링됨

prostudy 2022. 3. 13. 11:03
반응형

프레임워크 셀 렌더러를 사용한 Ag 그리드가 스토어 변경 시 계속 재렌더링됨

리액션으로 사용자 지정 셀 프레임워크 렌더러를 구현하려고 하는 것은 충분히 간단해 보인다.React 구성 요소를 생성하고 에 등록하십시오.frameworkComponents.

채를 는 데이이다.rowData 세포 이다.사용자 정의 셀 렌더러는 기능 반응 구성 요소다.

문제는 내가 셀렌더로 FrameworkComponent - 내 경우 React 구성 요소를 사용하고 있기 때문에, 내가 통과하고 있는 그리드 데이터의 어떤 변화도 보이는 것이다.useSelector(selectorForMyData)브라우저에서 임의의 성가신 깜박임처럼 보이는 내 프레임워크의 리렌더 발생 구성요소응용 프로그램이 리듀렉스(Redex)에 고도로 연결되어 있음

두 가지 질문:

1 - 기본적으로 ag 그리드를 사용하여 이 셀을 렌더링할 때AgGridColumn사용자 지정 셀 렌더러가 없으면 동일한 상점에서 이러한 재조정 동작이 변경되지 않는가?메인 페이지에 연결된 클릭 이벤트가 있어 플래그를 거짓으로 전환함(스낵바 경보가 열린 경우)

2 - 이를 극복할 수 있는 방법은 없을까?포장을 해보았다.return프레임워크 셀 렌더러 구성요소에 다음이 있는 문장useMemo…과 함께params의존적인 존재로, 하지만 그건 효과가 없는 것 같아또 만들어 보기도 했다.render을 통해 기능하다.useCallback와 같은 생각으로useMemo그것도 도움이 되지 않는다./

고마워요.

상황에 대한 의사 코드:

App.tsx:

<MyAgGrid/>

MyAgrid.tsx:


const MyAgGrid = () => {
 const data = useSelector(selectorForData);
 return (
   <AgGridReact
     rowData={data}
     frameworkComponents={
       {'myCustomRenderer': CustomRendererComponent}
     }
     columnDefs={
       ['field': 'aField', cellRenderer: 'myCustomRenderer']
     } />
   );
};


CustomCellRendererComponent.tsx:

const CustomCellRendererComponent = (params) => {
  console.log("params", params) //logs on every redux store update
  return (
    <div>HELLO WORLD</div>
  );
};


via를 는 셀이다.CustomCellRendererComponent리듀렉스 매장 변경 시 재조정됨.내 짐작으로는 그 때문인가 보다.useSelector가게의 재입고를 유발하는 것은 예상된 바지만, 내 첫 번째 질문에 답하지 않는다.

편집: 여기 보이는 "수업으로서의 기능" 루트로 갔더니 ("MyCellRender") 지금까지 리렌더링 문제가 보이지 않기 때문에, 비록 못생겼지만 당분간은 그 루트를 고수할 것이다.이는 셀 렌더러가 문제를 일으키기 때문에 내 문제가 라이프사이클의 뉘앙스와 함께 React 구성 요소/후크에 맞추려고 한다고 믿게 한다.그래도 계속 재계약하는 행동을 막을 방법이 있어야 할 것 같은데 그렇지 않으면 꽤 쓸모없는 특색이다.

편집 pt 2: 더 깊이 파고들어 그것을 위한 기본 용액을 찾지 못한 상태에서 나는 그 용액을 추가했다.reselect내 선택권 일부를 메모하는 라이브러리가져올 선택기rowData이제 메모가 남았는데 더 이상 이 문제가 안 보여더 나은 솔루션을 제공하는 사람이 없을 경우(환원 또는 ag 그리드가 있는 경우), 며칠 후에 답변으로 표시한다.

내가 편집한 내용 중 하나에서 언급했듯이.알아냈어, 일종의.

나는 도서관을 추가했다.reselect증상을 치료하고 앞으로 나아가는 데 만족해그것은 당신이 당신의 선택기를 메모화 할 수 있게 해주기 때문에 당신이 그것을 변화/소환에 연결시킨 의존성 선택기들 중 어떤 것이라도, 당신이 그것을 변화/소환하는 경우에만 변경/"소환" (재렌더로 이어짐)을 등록하도록 한다. 그래서 이제, 나의 그리드는 나의 실제 행 데이터가 변화하기 전까지는 "플릭커"되지 않는다.selectorForRowData메모가 되어 있다!

나는 여전히 왜 a를 사용하기 전에frameworkComponent(React Component) 셀 렌더러로서 나는 증상을 보지 못했지만, 애그그그리드에게 사용자 지정 셀 렌더러의 경우와 같이 고객이 자신의 커스텀 기능을 연결할 때 잃어버릴 수 있는 많은 성능 요령이 있다고 가정하는 것만으로도 기쁘다.

참조URL: https://stackoverflow.com/questions/65837113/ag-grid-using-framework-cell-renderer-keeps-re-rendering-on-any-store-change

반응형