使用生成版本
在部署應用時，請确認使用了生産版本。
單檔案建構
我們提供壓縮好的生産版本的 React 和 React DOM 檔案:
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
webpack
為了建立最高效的Webpack生産版本，需要在生産版本的配置中添加這些插件：
使用 Chrome 性能分析工具 分析元件性能
在 開發模式 中，你可以在支援相關功能的浏覽器中使用性能工具來可視化元件 裝載(mount) ，更新(update) 和 解除安裝(unmount) 的各個過程。例如：
避免重新渲染
React 建構并維護渲染 UI 的内部表示。它包括你從元件中傳回的 React 元素。這些内部狀态使得 React 隻有在必要的情況下才會建立DOM節點和通路存在DOM節點，因為對 JavaScript 對象的操作是比 DOM 操作更快。這被稱為”虛拟DOM”，React Native 也是基于上述原理。
避免更新
通過重寫生命周期函數 shouldComponentUpdate 來優化性能，該函數會在重新渲染流程前觸發。該函數的預設實作中傳回的是 true，如果你的元件在部分場景下不需要更新，你可以在 shouldComponentUpdate 傳回 false來跳過整個渲染流程，包括調用render() 和之後流程。
示例：通過 shouldComponentUpdate 函數來檢查：
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
// 傳回false之後，render() 就不會被執行
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}