1、使用PureRenderMixin淺比較

PureRenderMixin的出現早於React.PureComponent，該外掛屬於歷史保留，現在就使用React.PureComponent吧，這裡也就提一下

如果你的React元件的渲染函式是一個純函式也就是說對於相同的值返回一樣的結果同時不影響元素局，在某些場景下，你可以利用這個外掛來極大地提升效能。

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function
 
() {
    return <div className={this.props.className}>foo</div>;
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

在底層，該外掛實現了shouldComponentUpdate，在這裡面，它比較當前的props、state和接下來的props、state，當兩者相等的時候返回false，不進行更新。

ES6版本

import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
  constructor(props) {
    super
 
(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}`

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

2、深層次的資料比較forceUpdate()/immutable objects

僅僅是淺比較物件。如果物件包含了複雜的資料結構，深層次的差異可能會產生誤判。僅用於擁有簡單props和state的元件，或者當你知道很深的資料結構已經變化了的時候使用forceUpdate()