프레임워크 셀 렌더러를 사용한 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) 셀 렌더러로서 나는 증상을 보지 못했지만, 애그그그리드에게 사용자 지정 셀 렌더러의 경우와 같이 고객이 자신의 커스텀 기능을 연결할 때 잃어버릴 수 있는 많은 성능 요령이 있다고 가정하는 것만으로도 기쁘다.
'programing' 카테고리의 다른 글
성분 nnxt의 process.env 변수에 액세스할 수 없음 (0) | 2022.03.13 |
---|---|
Thunk 디스패치 대기 결과를 입력하려면 어떻게 해야 하는가? (0) | 2022.03.13 |
인쇄 함수 출력(비퍼 파이선 출력)을 플러시하려면 어떻게 해야 하는가? (0) | 2022.03.12 |
Json을 Vue 구성 요소 및 루프에 전달 (0) | 2022.03.12 |
Redex를 사용하여 배열에서 요소 삭제 (0) | 2022.03.12 |