immutable用法
Immutable 详解及 React 中实践
所有数据出入state用Immutable类型
1.安装
yarn add immutable --save
yarn add redux-immutable --save
2.改变 reducer合并方式
// 原本方式，reducer 里面处理的是原生的js
// import {combineReducers} from 'redux'
// reducer 处理的是 immutable 格式的数据
import { combineReducers } from 'redux-immutable'
import homeRedux from './homeReduce'
import contactRedux from './contactReduce'
import momentRedux from './momentReduce'
import mineRedux from './mineReduce'
import routeRedux from './routeReduce'
const AppReducer = combineReducers({
homeRedux,
contactRedux,
momentRedux,
mineRedux,
routeRedux
});
export default AppReducer
import * as Action from '../constance/actionType';
import Immutable from 'immutable'
const initState = Immutable.fromJS({
abc: '默认值'
});
export default (state = initState, action)=>{
switch (action.type){
case Action.ACTION_IMMUTABLE:
// 进来数据为 Immutable 类型
return state.set('abc',Immutable.fromJS(action.payload));
break;
default:
return state;
}
}
3.在page中
function mapStateToProps(state) {
// 出去数据为 Immutable getIn:得到深层次的数据,get:得到单层的数据
console.log('home state:',state.toJS());
return {
abc: state.getIn(['homeRedux','abc'])
}
}
❗️注
所有数据出入state用Immutable类型（必须）
在redux中，全局state必须是immutable的，这点毋庸置疑是我们使用immutable来优化redux的核心
组件props是通过redux的connect从state中获得的，并且引入immutableJS的另一个目的是减少组件shouldComponentUpdate中不必要渲染，shouldComponentUpdate中比对的是props，如果props是原生JS就失去了优化的意义
组件内部state如果需要提交到store的，必须是immutable，否则不强制
page提交到action中的数据必须是immutable
Action提交到reducer中的数据必须是immutable
网络请求下来的数据必须转成 immutable （非必须）
优化shouldComponentUpdate
注❗️：组件的props数据是immutable类型
注❗️：组件的props数据是immutable类型
注❗️：组件的props数据是immutable类型
优化shouldComponentUpdate方式一：baseComponent
//baseComponent.js component的基类方法
import React from 'react';
import {is} from 'immutable';
class BaseComponent extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
}
shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {};
const thisState = this.state || {};
nextState = nextState || {};
nextProps = nextProps || {};
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])) {
return true;
}
}
for (const key in nextState) {
if (!is(thisState[key], nextState[key])) {
return true;
}
}
return false;
}
}
export default BaseComponent;
组件中如果需要使用统一封装的shouldComponentUpdate，则直接继承基类
import BaseComponent from './BaseComponent';
class Menu extends BaseComponent {
constructor() {
super();
}
…………
}
