2017-02-04 9 views
0

클럽/파티 공연을위한 시청각 응용 프로그램을 만들고 있습니다. 60fps에서 실행되는 webGL 애니메이션이 관련됩니다.매 초마다 많은 변경 사항이있는 Redux 성능

애니메이션이 매초 끊임없이 바뀔 수있는 여러 매개 변수에 응답합니다 (예 : 회전하는 큐브의 크기가 음악으로 펄싱 될 수 있음). 예를 들어, 20 개의 매개 변수가있을 수 있으며, 모두 초당 60 번 변경됩니다. 이 매개 변수는 UI에서 숫자/시각 막대로 표시됩니다.

저는 이것을 수행하기 위해 React/Flux/NWJS를 사용하고 있습니다. 그러나 나는 Redux를 정말 좋아하고 데이터 흐름을 Redux 모델로 변경하려고합니다.

내 질문은 : 저장소를 초당 60 회 이상 변경 될 수있는 경우 저장소를 변경할 수 없도록 (예 : 변경 사항마다 복제) 성능에 영향을 줍니까? 그렇다면 앱의 특정 부분에 대해이를 우회하여 덜 자주 변경하는 경우에만 Redux를 사용할 수 있습니다.

+0

(영국 공군 스케줄러의 예를 참조) 여기에 문서에서 제안, requestAnimationFrame에 대한 작업 및 파견을 큐에 넣 돌아 오는 미들웨어를 사용할 수 - I 당신이 그것을 시도하는 것이 좋습니다. 불필요한 재 렌더링을 피하기 위해 컴포넌트에'shouldComponentUpdate'를 구현하면 도움이 될 것입니다. –

+0

나는 redux를 사용하여 코드를 효율적으로 만들 수있는 방법을 찾아야한다고 생각합니다. 검색을 위해 https://facebook.github.io/immutable-js/ 흥미를 느낄 수도 있습니다. 다음은 동일한 가려움증을 긁어내는 재미있는 GitHub 대화입니다. https://github.com/reactjs/redux/issues/328#issuecomment-125035516 –

답변

0

비주얼 용 WebGL을 사용하는 경우 Redux를 유지하면서 모두를 건너 뛸 수 있습니다. Redux는 React와는 독립적입니다. 그 의미를 자유롭게 사용할 수 있으며, subscribe으로 콜백을 등록하여 Store를 변경할 때 무언가를 할 수 있습니다.

http://es.redux.js.org/docs/api/Store.html#subscribe

그것은 WebGL을 동시에 화면에 존재하는 슬라이더/컨트롤 시각화 모두있을 것이다 앱의 가로 세로 나에게 분명하지 않다?

그렇다면 UI 컨트롤을 호스팅하는 React 앱과 canvas을 포함하는 별도의 DIV를 가질 수 있습니다. React 부분은 표준 Redux를 사용하여 매개 변수 상태를 유지하며 WebGL 독립 코드는 모든 requestAnimationFrame의 상점에서 읽고 장면을 렌더링해야합니다.

또한 대답은 많은 것들에 의존

http://redux.js.org/docs/advanced/Middleware.html#seven-examples