阅读 203

Immutable.js & React

概述

为什么要了解不可变数据?

Redux 要求全局状态具有不可变性。

Redux 要求本地组件状态具有不可变性。

数据突变与不可变

什么是数据突变

const p1 = { name: '张三' };
const p2 = p1;
p2.name = '李四';
console.log(p1.name); // '李四'
console.log(p2.name); // '李四'
复制代码
const a = [2, 1, 4, 3];
const b = a.sort();
console.log(b); // [1, 2, 3, 4]
console.log(a); // [1, 2, 3, 4]
复制代码

在 JavaScript 中,对象属于引用数据类型,将一个对象赋值给两一个对象时,实际上是将对象的引用地址赋值给了另一个对象,此时两个变量同时指向了内存中的同一个对象,通过两个变量对对象进行的任何操作,都会影响另一方,这就是数据突变。

由于数据突变带来的不可预测,非常容易导致改 A 坏 B 的问题。

什么是数据的不可变

对引用类型的数据进行更改,更改并不会作用于原数据,而是返回一个更改后的全新的数据。

const before = ['a', 'b', 'c', 'd'];
const after = before.slice(0, 2);
console.log(after); // ['a', 'b']
console.log(before); // ['a', 'b', 'c', 'd']
复制代码

可以把数据突变想象为“保存”, 它会在原有数据上进行修改。 可以把数据的不可变想象为“另存为”,它会返回全新的更改后的数据。由于数据的不可变,使数据操作更加安全,更加可预测。

JavaScript 中的数据不可变

在 JavaScript 中,既提供了数据突变方法,又提供了数据不可变方法。

sort、splice、push、pop 等就属于数据突变方法。

map、filter、reduce、slice 等就属于数据不可变方法。

JavaScript 中的扩展运算符也可以比较方便的实现数据的不可变。

  1. 添加
const before = ['a', 'b', 'c', 'd'];
const after = [...before, 'e'];
console.log(after); // ['a', 'b', 'c', 'd', 'e']
console.log(before); // ['a', 'b', 'c', 'd']
复制代码
  1. 删除
const before = ['a', 'b', 'c', 'd'];
const after = [...before.slice(0, 2), ...before.slice(3)];
console.log(after); // ['a', 'b', 'd' ]
console.log(before); // ['a', 'b', 'c', 'd']
复制代码
  1. 更新
const before = ['a', 'b', 'c', 'd'];
const after = [...before.slice(0, 1), 'x', 'y', ...before.slice(3)];
console.log(after); // ['a', 'x', 'y', 'd' ]
console.log(before); // ['a', 'b', 'c', 'd']
复制代码

不完整的数据不可变

JavaScript 不具备完整的数据不可变性,因为它提供的那些具有数据不可变的方法都属于浅拷贝,对于引用数据类型嵌套的情况,内层数据仍然是引用地址的拷贝。

const state = [{ name: 'super me' }];
const newState = state.slice(0);
newState[0].name = '李四';

console.log(newState); // [{ name: '李四'}]
console.log(state); // [{ name: '李四'}]
复制代码

以上问题可以通过深拷贝解决,但是深拷贝是有性能问题的,其一是每次深拷贝都要把整个对象递归的复制一份,递归的过程是消耗性能的,其二是在内存中多出了很多重复的相同的数据,占用内存。

const p1 = { name: '张三', skill: ['编程', '驾驶'] };
const p2 = deepClone(p1);
p2.name = '李四';
复制代码

比如上例中将p1进行了深拷贝,p1和p2就变成了两个完全独立的对象,虽然解决了 name 属性值互不影响的问题,但是同时在内存中也多出了一份完全相同的skill属性。

理想状态应该是两个对象中name属性是独立的,skill属性是共享的。

const skill = ['编程', '驾驶'];
const p1 = { name: '张三', skill };
const p1 = { name: '李四', skill };
复制代码

Immutable.js

概述

Immutable.js 中提供了不可变数据结构,主要解决两个问题,第一是防止数据突变,第二是提升数据操作性能。

防止数据突变

Immutable 意味不可变数据,每次操作都会产生一个新的不可变数据,无论这个操作是增加,删除还是修改,都不会影响到原有的不可变数据。不可变数据可以防止数据突变带来的不可预测性。

提升数据操作性能

不可变数据采用了数据结构共享,返回的新的不可变数据中,发生变化的数据是独立的,其他没有发生变化的数据是共享的,数据结构共享解决了深拷贝带来的性能问题。

下载:npm install immutable@4.0.0-rc.12

官网:https://immutable-js.github.io/immutable-js

数据结构

在 Immutable.js 中提供了多种数据结构用于实现不可变数据,常用的有两种,即 List 和 Map。

List 对应 JavaScript 中的数组。

Map 对应 JavaScript 中的对象。

import { List, Map } from 'immutable';

const l1 = new List(['a', 'b']);
console.log(l1); // List ['a', 'b']
const m1 = new Map({ a: 1, b: 2 });
console.log(m1); // Map { a: 1, b: 2 }
复制代码

实例方法

设置数据

import { List } from 'immutable';

const l1 = new List(['a', 'b']);
const l2 = l1.set(0, "x");
console.log(l2); // List ['x', 'b']
console.log(l1); // List ['a', 'b']
复制代码
import { Map } from 'immutable';

const m1 = new Map({ a: 1, b: 2 });
const m2 = m1.set('a', 100);
console.log(m2); // Map { a: 100, b: 2 }
console.log(l\m1); // Map { a: 1, b: 2 }
复制代码

获取数据

import  { List } from 'immutable';

const l1 = new List(['a', 'b']);
console.log(l1.get(0)); // 'a';
复制代码
import { Map } from 'immutable';

const m1 = new Map({ a: 1, b: 2 });
console.log(m1.get('a')); // 1;
复制代码

合并数据

import  { List } from 'immutable';

const l1 = new List(['a', 'b']);
const l2 = new List(['c', 'd']);
const l3 = l1.merge(l2);

console.log(l3); // List ['a', 'b', 'c', 'd']
console.log(l1); // List ['a', 'b']
console.log(l2); // List ['c', 'd']
复制代码
import { Map } from 'immutable';

const m1 = new Map({ a: 1, b: 2 });
const m2 = new Map({ c: 3, d: 4 });
const m3 = m1.merge(m2);
console.log(m3); // Map { a: 1, b: 2, c: 3, d: 4 }
console.log(m1); // Map { a: 1, b: 2 }
console.log(m2); // Map { c: 3, d: 4 }
复制代码

删除数据

import  { List } from 'immutable';

const l1 = new List(['a', 'b']);
const l2 = l1.remove(0);
console.log(l2); // List ['b']
console.log(l1); // List ['a', 'b']
复制代码
import { Map } from 'immutable';

const m1 = new Map({ a: 1, b: 2 });
const m2 = m1.remove('a');
console.log(m2); // Map { b: 2 }
console.log(m1); // Map { a: 1, b: 2 }
复制代码

更新数据

import  { List } from 'immutable';

const l1 = new List(['a', 'b']);
const l2 = l1.update(0, target => target + 'hello');
console.log(l2); // List ['ahello', 'b']
console.log(l1); // List ['a', 'b']
复制代码
import { Map } from 'immutable';

const m1 = new Map({ a: 1, b: 2 });
const m2 = m1.update('b', target => target * 2);
console.log(m2); // Map { a: 1, b: 4 }
console.log(m1); // Map { a: 1, b: 2 }
复制代码

数据类型转换

使用 fromJS 方法将数组和对象转换为不可变数据,数组转为 List,对象转为 Map。Map 和 List 方法在创建数据时不支持深层嵌套,fromJS 方法支持深层嵌套。

import { Map } from 'immutable';

const m1 = new Map({ a: { b: { c: 1 } } });
console.log(m1) // Map {'a': [object Object]} 
复制代码
import { fromJS } from 'immutable';

const f1 = fromJS({ a: { b: { c: 1 } } });
console.log(f1) // Map {'a': Map {b: Map {c: 1}}} 
复制代码
import { fromJS } from 'immutable';

const f1 = fromJS({ a: { b: { c: 1 } } });
const f2 = f1.setIn(['a', 'b', 'c'], 100);
console.log(f2) // Map {'a': Map {b: Map {c: 100}}}
console.log(f1) // Map {'a': Map {b: Map {c: 1}}} 
复制代码

数据比较

使用 is 方法判断两个不可变数据是否相同。

import { fromJS, is } from 'immutable';

const m1 = new Map({ a: { b: { c: 1 } } });
const m2 = new Map({ a: { b: { c: 1 } } });

console.log(is(m1, m2)) // true
复制代码

Immutable.js & React

性能优化

在 React 中,当调用 setState 方法更新数据时,即使传入的数据和以前一样,React 也会执行 diff 的过程,因为 JavaScript 中对象与对象的比较采用的是引用地址,所以即使两个对象长得一样,其实也是不相等的,所以会走 diff 的过程。为了解决这个问题,React 提供了 PureComponent,但是 PureComponent 采用的是浅层比较,当数据结构比较复杂时,依然会存在无效的 diff 操作。

immutable.js 提供了数据结构共享特性,能够快速进行差异比较,使组件更加智能的渲染。

import { fromJS, is } from 'immutable';
import { Component } from 'react';

class APP extends Component {
  constructor() {
    super()
    this.state = {
      person: fromJS({
        name: '张三'
      })
    }
  }
}

shouldComponentUpdate(nextProps, nextState) {
  if (!is(this.state.person, nextState.person)) {
    return true;
  }
  return false;
}

render() {
  console.log('render')
  return (
    <div>
      <p>{this.state.person.get('name')}</p>
      <button
        onClick={() => this.setState({
          person: this.state.person.set('name', '张三')
        })}
      >
        按钮
      </button>
    </div>
  )
}

export default App
复制代码

防止数据突变

import { fromJS, is } from 'immutable';
import { Component } from 'react';

class APP extends Component {
  constructor() {
    super()
    this.state = {
      person: fromJS({
        name: '张三',
        age: 20
      })
    }
  }
}

render() {
  console.log('render')
  return (
    <div>
      <p>{this.state.person.get('name')}</p>
      <p>{this.state.person.get('age')}</p>
      <button
        onClick={() => this.setState({
          person: this.state.person.set('name', '李四')
        })}
      >
        按钮
      </button>
    </div>
  )
}

export default App
复制代码

以上例子如果直接this.setState({person: {name: '李四'}})会发生数据突变。

Immutable & Redux

import ReactDOM from 'react-dom';
import APP from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { fromJS } from 'immutable';

const initialState = fromJS({ count: 0 })

function reducer (state = initialState, action) {
  let count = state.get('count')
  switch (action.type) {
    case 'increment':
      return state.set('count', count + 1)
    case 'decrement':
      return state.set('count', count - 1)
    default: 
      return state;
  }
}

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
复制代码
import { useDispatch, useSelector } from 'react-redux';

function App () {
  const dispatch = useDispatch();
  const count = useSelector(state => state.get('count')
  return (
    <div>
      {count}
      <button onClick={() => dispatch({type: 'increment'})}>
        increment
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>
        decrement
      </button>
    </div>
  )
}

export default App
复制代码
文章分类
前端