網頁運行最重要的是速度快嘛，那我們怎么知道網頁運行的時候，哪些部分快哪些部分慢呢？
我們可以安裝react性能檢測工具進行檢測，通過安裝
然后修改app/index.jsx文件
，在要檢測的組件運行之前輸入
然后再運行
最后再運行
即可以打印出浪費性能的組件列表，最后我們我對浪費性能的組件列表進行優化即可。
那我們如何進行優化呢？
我們可以通過安裝
然后在組件中引用並使用。
比如
React 有一個生命周期 hook 叫做shouldComponentUpdate，組件每次更新之前，都要過一遍這個函數，如果這個函數返回true則更新，
如果返回false則不更新。而默認情況下，這個函數會一直返回true，就是說，如果有一些無效的改動觸發了這個函數，也會導致無效的更新。
那么什么是無效的改動？之前說過，組件中的props和state一旦變化會導致組件重新更新並渲染，但是如果props和state沒有變化也莫名其妙的觸發更新
了呢（這種情況確實存在）———— 這不就導致了無效渲染嗎？這里使用this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);的
意思是重寫組件的shouldComponentUpdate函數，在每次更新之前判斷props和state，如果有變化則返回true，無變化則返回false。
因此，我們在開發過程中，在每個 React 組件中都盡量使用PureRenderMixin。
我們所做的TodoDemo，里面主要是控制input組件，以及下面的列表組件。
在input組件中
在List組件中
在我們的Todo組件中，它定義了數據展示出來的規則，它是一個智能組件
本博客升華自：大眾點評app視頻。
完整的demo見github:https://github.com/JserJser/reactWebApp/tree/master/perf-optimization。