结合immutable进行react开发

为什么使用immutable

当我们需要使用一个东西的时候，自然是遇到了一些不使用这种东西就难以解决的一些问题。
今天在写react应用的时候，发现一个问题，就是在不是用redux的情况下，当container级别的组件的state的结构变得比较复杂的时候，每次修改叶子节点的数据进行setState的时候就会变得非常麻烦。比如下面这种

class Container extends Component {
  constructor() {
    super();
    this.state = {
      a: {
        aa: {
          aaa: 1
        }
      }
    };
  }
  ...
}

每次想要修改a.aa.aaa的值，进行setState就会很麻烦

onChnage() {
  this.setState({
    a: {
      aa: {
        aaa: 2
      }
    }
  })
}

每次只更改一个小点，你就需要将整个state的结构重新写一遍，现在当然还勉强可行，但是如果当数据结构变成a,b,c,d...都有这种嵌套，难道还是这样重复写一次？那估计到了后期，每天写两个setState，我们就可以回家吃饭了。
当然，有的朋友可能一般写代码是这样写的。

onChange() {
  this.state.a.aa.aaa = 2;
  this.setState(this.state);
}

这种做法当然是不可取的，而且当你这么写的时候，react会抛出警告，告诉你不能直接修改state的值。如果你了解过setState的原理，你就会知道setState并不会立即更新UI，它是一个异步更新流程。每次调用setState的时候，你要更新的state会先被存储，然后在执行栈的末尾进行合并。如果你直接修改了state，那么整个state在当前执行栈中就会变得非常混乱，你不会知道state是先在哪个方法中被修改，因此非常容易造成一些无法预知的错误。那···我们怎么解决这个问题呢。
赋值？

var myState = this.state;
myState.aa.aaa = 2;
this.setState(myState);

可行吗？当然不行，因为JS是引用赋值，这种方式与直接修改state没有任何差别。所以，没办法了，我们只能采用深度克隆。但是采用深度克隆，会面临非常严重的性能问题，也不会是我们的最优解决方案。那么，这个时候就需要用到immutable了，构建不可变数据结构，每次更改当前的数据，都会生成一个新的数据结构。同时，因为immutable内部采用了特殊的优化方式，只有更改的节点会被克隆，没有被更改的节点会被共享，所以依然保持了较低的性能消耗，这样一来，我们进行状态的修改，就没有什么后顾之忧了。
当然，我前面提到的情况只是immutable展示威力的一个小场景，如果项目中使用了immutable，会带来更多意想不到的好处。

怎么使用immutable

这里我们使用facebook官方的immutable.js，
git地址：https://github.com/facebook/immutable-js，
文档地址：http://facebook.github.io/immutable-js/docs/#/，
在文档页面f12打开控制台，我们也可以进行api的测试。这里我列举几个常用的api，也方便自己以后的复习。

fromJS()

这个是比较常用的方法，传入Object，返回Map，传入Array，返回List，所以一般的数据转换用这个就足够了

import {fromJS} from 'immutable';

let origin = {
  a: {
    aa: {
      aaa: 1
    }
  }
}
let imt = fromJS(orgin);

用get()获取数据

使用了immutable后，就不能像之前a.aa.aaa这样来获取数据了，我们需要使用get()方法

let aaa = imt.get('a').get('aa').get('aaa');

使用update()更新数据

update的第一个参数是key，但是第二个参数是一个函数，其参数是原本的值，这点需要注意

let result = imt.get('a').get('aa').update('aaa', old => 2);

示例代码

贴一下结合了immutbale写的一个简单的tab组件

container.js

import React, {Component} from 'react';
import TopBar from './top-bar';
import Content from './content';
import {fromJS} from 'immutable';

class Container extends Component {
  constructor() {
    super();

    this.state = {
      active: 0,
      contents: fromJS(['这是item1的内容: 11111111111111',
        '这是item2的内容: 22222222222222',
        '这是item3的内容: 33333333333333']),
      items: fromJS(['item1', 'item2', 'item3'])
    };

    this.changeFocus = this.changeFocus.bind(this);
  }

  changeFocus(index) {
    var state = this.state;
    state.active = index;
    this.setState(state);
  }

  render() {
    return (
      <div>
        <TopBar changeFocus={this.changeFocus} items={this.state.items}></TopBar>
        <Content contents={this.state.contents} active={this.state.active}></Content>
      </div>
    );
  }
}

export default Container;

top-bar.js

import React from 'react';
import "./top-bar.css";

let TopBar = ({items, changeFocus}) => {

  return (
    <div className="top-bar">
      <ul className="item-list">
        {items.map(function(item, i) {
          return (
            <li key={i} className="item" onClick={() => changeFocus(i)}>{item}</li>
          );
        })}
      </ul>
    </div>
  );
}

export default TopBar;

content.js

import React, { Component } from 'react';

class Content extends Component {

  render() {
    let items = this.props.contents.map((item, i) => {
      return (
        <div key={i} style={{ "display": this.props.active === i ? 'block' : 'none' }}>
          {item}
        </div>
      );
    })


    return (
      <div>
        {items}
      </div>
    );
  }
}

export default Content;