react使用Immutable实战

末蓝、 2023-06-12 08:58 5阅读 0赞

# **1. 与 React 搭配使用，Pure Render** #

熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的大招，就是使用 \`shouldComponentUpdate()\`，但它默认返回 \`true\`，即始终会执行 \`render()\` 方法，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。

当然我们也可以在 \`shouldComponentUpdate()\` 中使用使用 deepCopy 和 deepCompare 来避免无必要的 \`render()\`，但 **deepCopy 和 deepCompare 一般都是非常耗性能的**。

**Immutable 则提供了简洁高效的判断数据是否变化的方法**，只需 \`===\` 和 \`is\` 比较就能知道是否需要执行 \`render()\`，而这个**操作几乎 0 成本**，所以可以极大提高性能。修改后的 \`shouldComponentUpdate\` 是这样的：

import { is } from 'immutable';
    
    shouldComponentUpdate = (nextProps = {}, nextState = {}) => {
    	const thisProps = this.props || {}, thisState = this.state || {};
    
    	if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
    		Object.keys(thisState).length !== Object.keys(nextState).length) {
    		return true;
    	}
    
    	 for (const key in nextProps) {
                if (!is(thisProps[key], nextProps[key]) && typeof thisProps[key] !==         
                  'function') {
                    return true;
                }
            }
    
    	for (const key in nextState) {
    		if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
    			return true;
    		}
    	}
    	return false;
    }

# 2.如何setState #

this.state = {
        person: fromJS({
            name: 'xuxuan',
            age: 12
        })
    }
    
    this.setState({
        person: this.state.person.update('name', v => v + 'update')
    })

不建议你在State中使用ImmutableJS。一般用在Reducer层。

因为 state 本身必须是 plain object，但是里面的值可以是 immutable 的数据

# 3.结合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][https_github.com_facebook_immutable-js]，  
文档地址：[http://facebook.github.io/immutable-js/docs/\#/][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;

[https_github.com_facebook_immutable-js]: https://link.jianshu.com?t=https://github.com/facebook/immutable-js
[http_facebook.github.io_immutable-js_docs]: https://link.jianshu.com?t=http://facebook.github.io/immutable-js/docs/#/