基于react immutable数据拷贝优化库的使用 --拷贝优化

一、immutable数据拷贝优化在于引用，而不是占据内存的深拷贝大量数据的差异性能 (主要是属性多，对数据进行复杂单独提炼修改方便来优化数据源)

  1.因为在react中，redux经常要做拷贝，因为redux中的reducer是一个纯函数（输出完全依赖输入，不能影响外部数据）

不管是json方法拷贝，还是递归拷贝，都会存在问题：例如：一个对象有十个属性，每一个属性又有十个属性

拷贝数据会多占用一份内存，所以就是可以使用immutable来解决拷贝，直接去引用数据就可以了，拷贝五十万条数据只会多占用一份，

下载命令：cnpm i -S immutable redux react-redux

import {Map} from 'immutable'
let obj = Map({id:10,count:20})
//获取数据 
console.log(obj.id)
console.log(obj.get('id')) //获取键值

//修改数据
const newObj=obj.set('id','test')
//获取数据
console.log(obj.get('id'))  //underfined
console.log(newObj.get('id')) //test

map使用

 

 2.reducer定义数据，获取修改数据

import {Map} from 'immutable'
import {SET_COUNT} from './type'
const initState ={
   obj:Map({
    name:'华为手机',price:5000,count:1
})
}
export default function(state = initState,action){
   switch(action.type){
   case SET_COUNT:
     return {
     ...state,
    //返回是obj对象
     obj:state.obj.setIn(['count'],state.obj.get('count')+ action.step)
}
   default:
     return state
}
}

action.js

import {SET_COUNT} from './type'
export function getCountAct(step){
  return {type:SET_COUNT,step}
}

3.app组件

import React,{Component} from 'react'
import {connect} from 'react-redux'
import {getCountAct} from './store/action'

class App extends Component{
   addEvt(){
   this.props.dispatch(getCountAct(2))
}
   render(){
   return(
     <div>
    产品名字：{this.props.product.get('name')} 价格:{this.props.product.getIn(['price'])}数量：{this.props.product.get('count')}
<button onClick={this.addEvt.bind(this)}>增加</button>
   </div>
)
}
}
export default connect(
  state =>{
   return ({
   product:state.obj
})(App)

//获取数据两种方式 
//product.get('name')  get属性名
//product.getIn(['price']) getIn数组里面属性名
}
)

步骤：导入redux的createStore实例,再导入reducer文件 进行注入创建store实例 ===>reducer文件定义state导入Map来对数据存储，注入进reducer函数里进行返回新的数据源，

==>通过dispatch提交到action里参数里返回对reducer里进行修改源数据来返回新的数据，使用connect(数据源)(当前组件)进行赋值注入