为什么使用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;
网友评论