react的元件效能最佳化有：1、盡量多使用無狀態函數建置元件；2、分割元件為子元件，對元件做更細緻的控制；3、運用PureRender，對變更做出最少的渲染；4、運用immutable。
react的元件效能最佳化有：
1. 盡量多使用無狀態函數建構元件
無狀態元件只有props和context兩個參數。它不存在state，沒有生命週期方法，元件本身就是有狀態元件建構方法中的render方法。
在適當的情況下，都應該必須使用無狀態元件。無狀態元件不會像React.createClass和ES6 class會在呼叫時建立新實例，它在建立時始終保持了一個實例，避免了不必要的檢查和記憶體分配，做到了內部最佳化。
2. 分割元件為子元件，對元件做更細緻的控制
相關重要概念： 純函數
純函數的三大構成原則:
給定相同的輸入，它總是回傳相同的輸出： 例如反例有Math.random(), New Date()
##過程沒有副作用：即不能改變外在狀態沒有額外的狀態依賴：即方法內部的狀態都只能在方法的生命週期內存活，這表示不能在方法內使用共享的變數。 純函數非常方便進行方法層級的測試及重構，它可以讓程式具有良好的擴展性和適應性。純函數是函數式變成的基礎。 React元件本身就是純函數，也就是傳入指定props得到一定的Virtual DOM，整個過程都是可預測的。 具體辦法分割元件為子元件，對元件做更細緻的控制。保持純淨狀態，可以讓方法或組件更加專注(focus)，體積更小(small)，更獨立(independent)，更具有復用性(reusability)和可測試性(testability)。3. 運用PureRender，對變更做出最少的渲染
#相關重要概念:PureRender
shouldComponentUpdate的重寫，然後自己也可以做一些程式碼的最佳化來運用PureRender。
PureRender
shouldComponentUpdate的重寫
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div className={this.props.className}>foo</div>
}
}PureRender
shouldComponentUpdate傳回true的程式碼寫法。
<Account style={{color: 'black'}} />const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />onChange屬性的值:
render() {
return <input onChange={this.handleChange.bind(this)} />
}constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
...
}
render() {
return <input onChange={this.handleChange} />
}shouldComponentUpdate
4.運用immutable
JavaScript中物件一般是可變的，因為使用引用賦值，新的物件的改變將影響原始物件。為了解決這個問題是使用深拷貝或淺拷貝，但這樣做又造成了CPU和記憶體的浪費。Immutable data很好地解決了這個問題。
Immutable data就是一旦創建，就不能再更改的資料。對Immutable物件進行修改、新增或刪除操作，都會傳回一個新的Immutable物件。 Immutable實作的原理是持久化的資料結構。即使用舊資料建立新資料時，確保新舊資料同時可用且不變。同時為了避免深拷貝帶來的效能損耗，Immutable使用了結構共享(structural sharing),即如果物件樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其他節點則進行共享。
相關學習推薦：javascript學習教學
以上是react元件有過哪些效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
