什么是不可變值

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

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

變量b出現(xiàn)，雖然使用了變量a的值，但是沒(méi)有修改a的值。

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

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

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

為什么使用不可變值

React官網(wǎng)中給出三點(diǎn)好處：

• 簡(jiǎn)化復(fù)雜的功能

不可變性使得復(fù)雜的特性更容易實(shí)現(xiàn)。

• 跟蹤數(shù)據(jù)的改變

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

跟蹤不可變數(shù)據(jù)的變化相對(duì)來(lái)說(shuō)就容易多了。如果發(fā)現(xiàn)對(duì)象變成了一個(gè)新對(duì)象，那么我們就可以說(shuō)對(duì)象發(fā)生改變了。

• 確定在 React 中何時(shí)重新渲染

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

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

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

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新增加了一個(gè)PureComponent類，能夠?qū)rops和state進(jìn)行淺比較來(lái)減少render函數(shù)的執(zhí)行次數(shù)，避免不必要的組件渲染，實(shí)現(xiàn)性能上的優(yōu)化。
• PureComponent是什么原理呢

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

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>
    )
  }
}

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

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

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

• PureComponent幫我們做了淺層的比較，所以要注意state時(shí)盡量合理，如果需要出現(xiàn)引用嵌套引用的數(shù)據(jù)結(jié)構(gòu)的話，可以配合Immutable.js。
• 什么是Immutable

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

最后，如果想要在組件層面進(jìn)行淺比較，可以使用React.memo()函數(shù)

總結(jié)

其實(shí)還是官網(wǎng)說(shuō)的不可變性的第三條優(yōu)勢(shì)，也是最主要的優(yōu)勢(shì)，就是不可變性可以幫助我們?cè)赗eact中使用PureComponent。我們可以很輕松的確定數(shù)據(jù)是否發(fā)生了改變，組件何時(shí)需要發(fā)生重新渲染。

如果我們改變了state的值，shouldComponentUpdate獲取到當(dāng)前state和nextState，或者props和nextProps比較出來(lái)的值都是完全一樣的，都會(huì)返回false，即使我們做了setState的操作，UI也不會(huì)發(fā)生更新。

PureComponent最好是搭配Immutable.js進(jìn)行使用，來(lái)達(dá)到性能優(yōu)化的目的。

結(jié)合React.memo來(lái)避免沒(méi)必要的組件的更新渲染。

以上就是詳解React中的不可變值的詳細(xì)內(nèi)容，更多關(guān)于React中的不可變值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論