项目作者: azu

项目描述 :
Deep equal vs. Shallow equal on React's shouldComponentUpdate
高级语言: TypeScript
项目地址: git://github.com/azu/avoid-json-stringify-on-react.git
创建时间: 2017-11-26T15:33:46Z
项目社区:https://github.com/azu/avoid-json-stringify-on-react

开源协议:

下载


Avoid-json-stringify-on-react

React’s document said that

We do not recommend doing deep equality checks or using JSON.stringify() in shouldComponentUpdate(). It is very inefficient and will harm performance.
https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Test

Environment:

  • MacBookPro14,1
  • CPU: Intel Core i7, 2.5 GHz
  • Browser: Chrome – 6x CPU throttling

Before

Deep Equal (JSON.stringify(prevProps) === JSON.stringify(nextProps)):

image

  1. Name: A.shouldComponentUpdate, Duration: 0.9350000000004002
  2. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.010000000000218279
  3. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 1.1300000000001091
  4. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.015000000000327418
  5. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0.009999999999308784
  6. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 5.364999999999782
  7. App.tsx:32 Total shouldComponentUpdate: 7.4650000000001455
  8. App.tsx:33 Update components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate
  9. App.tsx:27 Name: A.shouldComponentUpdate, Duration: 0.014999999999417923
  10. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.004999999999199645
  11. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 0.019999999999527063
  12. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.005000000000109139
  13. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0
  14. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 5.770000000000437
  15. App.tsx:32 Total shouldComponentUpdate: 5.81499999999869
  16. App.tsx:33 Update components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate
  17. App.tsx:27 Name: A.shouldComponentUpdate, Duration: 0.015000000000327418
  18. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.005000000000109139
  19. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 0.005000000000109139
  20. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.005000000000109139
  21. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0.005000000001018634
  22. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 5.154999999999745
  23. App.tsx:32 Total shouldComponentUpdate: 5.190000000001419
  24. App.tsx:33 Update components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate

After

Shallow Equal(Use shallow-equal-props)

image

  1. Name: A.shouldComponentUpdate, Duration: 0.13999999999941792
  2. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.010000000001127773
  3. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 0.004999999999199645
  4. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.010000000000218279
  5. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0.015000000000327418
  6. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 1.125
  7. App.tsx:32 Total shouldComponentUpdate: 1.305000000000291
  8. App.tsx:33 Updated components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate
  9. App.tsx:27 Name: A.shouldComponentUpdate, Duration: 0.009999999999308784
  10. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.005000000000109139
  11. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 0.005000000000109139
  12. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.004999999999199645
  13. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0.005000000000109139
  14. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 0.009999999999308784
  15. App.tsx:32 Total shouldComponentUpdate: 0.03999999999814463
  16. App.tsx:33 Updated components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate
  17. App.tsx:27 Name: A.shouldComponentUpdate, Duration: 0.010000000000218279
  18. App.tsx:27 Name: B.shouldComponentUpdate, Duration: 0.004999999999199645
  19. App.tsx:27 Name: C.shouldComponentUpdate, Duration: 0
  20. App.tsx:27 Name: D.shouldComponentUpdate, Duration: 0.004999999999199645
  21. App.tsx:27 Name: E.shouldComponentUpdate, Duration: 0.005000000000109139
  22. App.tsx:27 Name: List.shouldComponentUpdate, Duration: 0.005000000000109139
  23. App.tsx:32 Total shouldComponentUpdate: 0.029999999998835847
  24. App.tsx:33 Updated components: A.shouldComponentUpdate, B.shouldComponentUpdate, C.shouldComponentUpdate, D.shouldComponentUpdate, E.shouldComponentUpdate, List.shouldComponentUpdate