성능 디버거

Question

나는 최근 반응에 대한 성능 강화 및 디버깅 연습을 시작했다 반응. 내가 react.addons.Perf.printWasted()와 디버깅을 시작했다

, 그것의 킵 나에게이 결과를 보여주는 : [정보

성능 도구를 반응

"AlertRow > Connect(AlertsBottomPanel)" 
"Connect(AlertsBottomPanel) > AlertsBottomPanel" 

이 무엇을 원하는가 내 redux 연결 기능? 나는 내가 완전히 읽고있는 것을 이해하는 것처럼 보인다. 거기에 좋은 turorial 반응 성능 디버깅 도구가있다, 그냥 아무것도 Google에입니다.

소개 shouldComponentUpdate 기술 : http://benchling.engineering/performance-engineering-with-react/이

이 정말로인가 :

shouldComponentUpdate(nextProps, nextState) { 
    return !_.isEqual(this.props, nextProps) || 
    !_.isEqual(this.state, nextState); 
} 

내가이 좋은 기사를 읽고 : 기사의 무리를 읽은 후, 나는 이해 결론은 붙여 넣기 단순히 복사 거기에, 아니면 내가 뭔가를 놓친거야?

Answer 1

이 기능을 연결 내 REDUX 무엇을 원하는가?

그것은 아무것도 싶어 ""하지 않는, 그냥 돌아 오는로부터 connect()이 당신의 소품이 변경 여부를 결정하는 몇 가지 작업을 보냈다 있다고,하지만 그들은 방법으로, 그래서 그 일이 낭비 된,하지 않았습니다.

는 "낭비"항상 뭔가 나쁜 일을 의미하지 않는다. 단지 일부 작업이 완료되었음을 의미하지만 DOM의 변경 사항에는 영향을 미치지 않습니다. connect()의 경우에는 실제 존재하는 이유가 있습니다. 귀하의 mapStateToProps으로 전화를 걸어 아래에 무엇을 렌더링할지 결정하십시오. 당신은 connect() ed 구성 요소 (React Redux에 의해 생성됨)를 제어 할 수 없기 때문에 실제로 그것에 대해 아무 것도 할 수 없습니다.

또한

: 숫자의 어떤 종류의 우리가 얘기? 1 ~ 2 밀리 초를 절약해도 아무런 차이가 없습니다.

shouldComponentUpdate(nextProps, nextState) { 
    return !_.isEqual(this.props, nextProps) || 
    !_.isEqual(this.state, nextState); 
} 

당신이이 글을 읽을 않았다

기사의 무리를 읽은 후, 나는 이해 결론은 붙여 넣기 단순히 복사입니까? 그것은 shouldComponentUpdate을 구현하는 매우 비효율적 인 방법입니다 그것을 performs a deep comparison 때문이다. 즉, 깊은 나무에서는 느려지 며 실제로는 React가 구성 요소를 다시 렌더링하는 것보다 느리게 진행됩니다.

내 조언은 반작용, 아껴서 함께 제공 shallowCompare 부가 기능을 사용하는 것입니다. 실제로 성능 향상을 볼 경우에만 사용하십시오. 단지 "모든 경우에"모든 구성 요소에 두지 마십시오.

마지막으로 프로덕션 React 빌드로 앱 성능을 실제로 확인하는 것을 잊지 마십시오. 개발 버전보다 5 배에서 10 배 더 빠를 수 있으므로 최적화 할 필요가없는 것을 최적화하지 않도록하십시오.