詳解React中的不可變值

更新時間：2021年04月10日 14:40:01 作者：一個前端王

這篇文章主要介紹了React中的不可變值的相關資料，幫助大家更好的理解和學習使用react.js，感興趣的朋友可以了解下

什么是不可變值

函數式編程是指程序里面的函數和表達式都能像數學中的函數一樣，給定了輸入值，輸出是確定的。比如

let a = 1;
let b = a + 1;
=> a = 1  b = 2;

變量b出現，雖然使用了變量a的值，但是沒有修改a的值。

再看我們熟悉的react中的代碼，假如初始化了this.state = { count: 1 }

componentDidMount() {
    const newState = { ...state, count: 2 }; // { count: 2 }
    this.setState(newState);
}

雖然我們使用了this.state，但是沒有修改this.state的引用地址和直接修改count的值，對待this.props也一樣。

為什么使用不可變值

React官網中給出三點好處：

簡化復雜的功能

不可變性使得復雜的特性更容易實現。

跟蹤數據的改變

如果直接修改數據，那么就很難跟蹤到數據的改變。跟蹤數據的改變需要可變對象可以與改變之前的版本進行對比，這樣整個對象樹都需要被遍歷一次。

跟蹤不可變數據的變化相對來說就容易多了。如果發(fā)現對象變成了一個新對象，那么我們就可以說對象發(fā)生改變了。

確定在 React 中何時重新渲染

不可變性最主要的優(yōu)勢在于它可以幫助我們在 React 中創(chuàng)建 pure components。我們可以很輕松的確定不可變數據是否發(fā)生了改變，從而確定何時對組件進行重新渲染。

React性能優(yōu)化離不開不可變值

首先，我們都知道，shouldComponentUpdate鉤子函數默認返回true，即只要父組件更新，子組件一定更新。
shouldComponentUdpate中可以接收兩個參數，nextProps和nextState，假如我們通過判斷this.props.xxx和nextProps.xxx相等以及this.state.xxx與nextState.xxx相等，可以將返回值設置為false，說明此次并不需要更新子組件。

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;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

React v15.3新增加了一個PureComponent類，能夠對props和state進行淺比較來減少render函數的執(zhí)行次數，避免不必要的組件渲染，實現性能上的優(yōu)化。
PureComponent是什么原理呢

我們知道JS中的變量類型分為基本類型（number、string、boolean、undefined、null、symbol）和引用類型（function、object、function），基本類型的值保存在棧內存當中，引用類型的值保存在堆內存當中，棧內存中只保存指向堆內存的引用。而淺比較就是只對棧內存中的數據進行比較。

class App extends PureComponent {
  state = {
    items: [1, 2, 3]
  }
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items });
  }
  render() {
    return (
        <div>
            <ul>
                {this.state.items.map(i => <li key={i}>{i}</li>)}
            </ul>
            <button onClick={this.handleClick}>delete</button>
        </div>
    )
  }
}

上邊這個例子使用了PureComponent，而且只改變了數組items里的值，而沒改變items的引用地址，所以認為items沒有發(fā)生變化，不會觸發(fā)render函數，不會觸發(fā)組件的渲染。

如果想實現組件更新，可以按如下的方式，創(chuàng)建一個新的數組，將新數組的地址賦給items。

handleClick = () => {
    const { items } = this.state;
    items.pop();
    var newItem = [...items];
    this.setState({ item: newItem });
}

PureComponent幫我們做了淺層的比較，所以要注意state時盡量合理，如果需要出現引用嵌套引用的數據結構的話，可以配合Immutable.js。
什么是Immutable

(1) Immutable是一旦創(chuàng)建，就不能被更改的數據。(2) 對Immutable對象的任何修改或添加刪除操作都會返回一個新的Immutable對象。(3)Immutable實現的原理是Persistent Data Structure（持久化數據結構），也就是是永久數據創(chuàng)建新數據時，要保證舊數據同時可用且不變。(4)同時為了避免deepCopy把所有節(jié)點都復制一遍帶來的性能損耗，Immutable使用了Structural Sharing（結構共享），即如果對象樹結點發(fā)生變化，只修改這個結點和受它影響的父節(jié)點，其他結點進行共享。