Immutable 的几种数据类型
- List: 有序索引集,类似JavaScript中的Array。
- Map: 无序索引集,类似JavaScript中的Object。
- OrderedMap: 有序的Map,根据数据的set()进行排序。
- Set: 没有重复值的集合。
- OrderedSet: 有序的Set,根据数据的add进行排序。
- Stack: 有序集合,支持使用unshift()和shift()添加和删除。
- Range(): 返回一个Seq.Indexed类型的集合,这个方法有三个参数,start表示开始值,默认值为0,end表示结束值,默认为无穷大,
- step代表每次增大的数值,默认为1.如果start = end,则返回空集合。
- Repeat(): 返回一个vSeq.Indexe类型的集合,这个方法有两个参数,value代表需要重复的值,times代表要重复的次数,默认为无穷大。
- Record: 一个用于生成Record实例的类。类似于JavaScript的Object,但是只接收特定字符串为key,具有默认值。
- Seq: 序列,但是可能不能由具体的数据结构支持。
- Collection: 是构建所有数据结构的基类,不可以直接构建。
用的最多就是List和Map
在React中使用Immutable.js
使用 Immutable 可以给 React 应用带来性能的优化,主要体现在减少染的次数
在做 react 性能优化的时候,为了避免重复染,我们会在shouldComponentUpdate() 中做对比,当返回 true 执行 render 方法
Immutable 通过 is 方法则可以完成对比,而无需像一样通过深度比较的方式比较
在使用 redux 过程中也可以结合 Immutable ,不使用 Immutable 前修改一个数据需要做一个深拷贝
import '_' from 'lodash';
const Component = React.createClass({
getInitialState() {
return {
data: { times: 0 }
}
},
handleAdd() {
let data = _.cloneDeep(this.state.data);
data.times = data.times + 1;
this.setState({ data: data });
}
}
使用Immutable 后:
getInitialState() {
return {
data: Map({ times: 0 })
}
},
handleAdd() {
this.setState({
data: this.state.data.update('times', v => v + 1)
});
// times
console.log(this.state.data.get('times'));
}
同理,在 redux 中也可以将数据进行 fromJS 处理
import * as constants from './constants'
import {fromJS} from 'immutable'
const defaultState = fromJS({ // immutable
home:true,
focused:false,
mouseIn:false,
list:[],
page:1,
totalPage:1
})
export default(state=defaultState,action)=>{
switch(action.type){
case constants.SEARCH_FOCUS:
return state.set('focused',true) // immutable
case constants.CHANGE_HOME_ACTIVE:
return state.set('home',action.value)
case constants.SEARCH_BLUR:
return state.set('focused',false)
case constants.CHANGE_LIST:
// return state.set('list',action.data).set('totalPage',action.totalPage)
//merge
return state.merge({
list:action.data,
totalPage:action.totalPage
})
case constants.MOUSE_ENTER:
return state.set('mouseIn',true)
case constants.MOUSE_LEAVE:
return state.set('mouseIn',false)
case constants.CHANGE_PAGE:
return state.set('page',action.page)
default:
return state
}
}
实例
在React中使用Immutable.js可以帮助你管理不可变数据,使你的应用更加可预测和高效。
以下是如何在React中应用Immutable.js的步骤:
- 安装Immutable.js
使用npm或yarn将Immutable.js添加到你的项目中:
npm install immutable
或
yarn add immutable
- 创建Immutable数据
使用Immutable.js创建不可变数据。例如,你可以创建一个不可变的列表:
import { List } from 'immutable';
const myList = List([1, 2, 3]);
- 在React组件中使用Immutable数据
将Immutable数据传递给你的React组件,并在组件中使用它。例如,你可以使用Immutable.js列表作为React组件的prop:
import React from 'react';
import { List } from 'immutable';
const MyComponent = ({ myList }) => {
return (
<div>
{myList.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
);
};
const myList = List([1, 2, 3]);
export default function App() {
return <MyComponent myList={myList} />;
}
- 使用Immutable.js的方法操作数据
使用Immutable.js的方法操作不可变数据。例如,你可以使用push
方法向列表中添加一个元素:
import { List } from 'immutable';
const myList = List([1, 2, 3]);
const newList = myList.push(4);
- 在React组件中更新Immutable数据
在React组件中,使用Immutable.js的方法更新不可变数据,并使用setState
方法更新组件的状态。例如,你可以在组件中使用push
方法向列表中添加一个元素,并使用setState
方法更新组件的状态:
import React from 'react';
import { List } from 'immutable';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { myList: List([1, 2, 3]) };
}
addItem = () => {
const newList = this.state.myList.push(4);
this.setState({ myList: newList });
};
render() {
return (
<div>
{this.state.myList.map((item, index) => (
<div key={index}>{item}</div>
))}
<button onClick={this.addItem}>Add Item</button>
</div>
);
}
}
扩展 Lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 遵循 MIT 开源协议发布,并且支持最新的运行环境。 查看各个构件版本的区别并选择一个适合你的版本。
为什么选择 Lodash ?
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于:
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
Lodash是一个JavaScript实用工具库,它提供了许多用于处理数组、对象和其他数据结构的函数。
Lodash的目标是提供一组高性能、可靠和一致的函数,以帮助开发人员更有效地编写JavaScript代码。
补充工具
futil-js 是一套用来补足 lodash 的实用工具集。
Lodash的特性包括:
- 迭代器实用程序:例如 map, filter, reduce, each 等。
- 实用程序:例如 debounce, throttle, cloneDeep 等。
- 性能:Lodash的函数都是高性能的,它们经过优化以提高执行速度。
- 链式调用:Lodash允许通过链式调用来组合多个函数。
- 兼容性:Lodash与大多数JavaScript环境兼容,包括Node.js和浏览器。
- 可扩展性:可以通过添加自己的函数来扩展Lodash的功能。
以下是一些常用的Lodash函数:
_.map(collection, [iteratee=_.identity])
:对集合中的每个元素应用iteratee函数,并返回一个新的数组。_.filter(collection, [predicate=_.identity])
:创建一个新数组,包含通过所提供函数实现的测试的所有元素。_.reduce(collection, [iteratee=_.identity], [accumulator])
:通过对集合中的每个元素执行一个reducer函数,将其减少为单个值。_.debounce(func, [wait=0], [options])
:创建一个debounced函数,该函数只会在指定的wait时间后执行func。_.throttle(func, [wait=0], [options])
:创建一个throttled函数,该函数只会在指定的wait时间内执行func。
这只是Lodash提供的一些功能,它还有许多其他有用的函数和工具。
Lodash 常用api分类
Lodash的API可以根据其功能进行分类。以下是一些常见的Lodash API分类:
- 集合方法(Collection Methods):这些方法是用于操作数组、对象和其他集合类型的工具。例如,
_.map
、_.filter
、_.reduce
、_.find
等。 - 数组方法(Array Methods):这些方法专门用于处理数组。例如,
_.isArray
、_.isEmpty
、_.first
、_.last
、_.times
等。 - 对象和属性方法(Object and Property Methods):这些方法是用于操作对象和属性的工具。例如,
_.assign
、_.has
、_.property
、_.matcher
等。 - 实用方法(Utility Methods):这些方法提供了一些通用的工具和功能。例如,
_.debounce
、_.throttle
、_.noop
、_.constant
、_.uniqueId
等。 - 函数方法(Function Methods):这些方法用于创建和操作函数。例如,
_.isFunction
、_.isNil
、_.isNaN
、_.isNull
、_.isUndefined
等。 - 类型检查方法(Type Checking Methods):这些方法用于检查值的类型。例如,
_.isArray
、_.isObject
、_.isString
、_.isNumber
、_.isBoolean
等。 - 赋值和合并方法(Assignment and Merging Methods):这些方法用于合并对象和分配值。例如,
_.assign
、_.assignIn
、_.assignWith
、_.assignInWith
等。 - 其他方法(Miscellaneous Methods):这些方法无法归类到其他类别中。例如,
.now()
、.VERSION
等。
这只是Lodash API的一个粗略分类,实际上Lodash提供了很多其他的方法和功能,可以根据具体需求查阅Lodash的官方文档以获取更详细的信息。
Lodash中常用的API介绍:
Lodash是一个流行的JavaScript实用工具库,提供了许多用于处理数组、对象和其他数据结构的函数。
_.map(collection, [iteratee=_.identity])
:对集合中的每个元素应用iteratee函数,并返回一个新的数组。_.filter(collection, [predicate=_.identity])
:创建一个新数组,包含通过所提供函数实现的测试的所有元素。_.reduce(collection, [iteratee=_.identity], [accumulator])
:通过对集合中的每个元素执行一个reducer函数,将其减少为单个值。_.debounce(func, [wait=0], [options])
:创建一个debounced函数,该函数只会在指定的wait时间后执行func。_.throttle(func, [wait=0], [options])
:创建一个throttled函数,该函数只会在指定的wait时间内执行func。_.find(collection, [predicate=_.identity])
:在集合中查找满足提供条件的第一个元素,并返回该元素的值。_.every(collection, [predicate=_.identity])
:检查集合中的所有元素是否都满足提供的条件。_.some(collection, [predicate=_.identity])
:检查集合中是否存在至少一个元素满足提供的条件。_.isEqual(value, other)
:执行深度比较,以确定两个值是否相等。_.isEmpty(value)
:检查值是否为空。_.isNil(value)
:检查值是否为null或undefined。_.isArray(value)
:检查值是否为数组。_.isObject(value)
:检查值是否为对象。_.isString(value)
:检查值是否为字符串。_.isNumber(value)
:检查值是否为数字。_.isBoolean(value)
:检查值是否为布尔值。_.isFunction(value)
:检查值是否为函数。_.isDate(value)
:检查值是否为日期对象。_.isRegExp(value)
:检查值是否为正则表达式对象。_.isNaN(value)
:检查值是否为NaN(非数字)。_.isNull(value)
:检查值是否为null。_.isUndefined(value)
:检查值是否为undefined。_.uniqueId([prefix])
:生成一个唯一的ID字符串,可以传入前缀。_.times(n, [iteratee=_.identity], [thisArg])
:创建一个数组,通过调用 iteratee 函数 n 次,并将结果存储在数组中。_.noop()
:返回一个空函数。_.constant(value)
:返回一个总是返回指定值的函数。_.property(path)
:创建一个函数,该函数返回给定对象的指定路径的值。_.propertyOf(object)
:创建一个函数,该函数返回给定对象的路径的键。_.matcher(props)
:创建一个匹配给定属性的函数。_.matches(source)
:创建一个匹配给定对象的函数。_.assign(object, [sources])
:将源对象的所有可枚举属性分配给目标对象。_.assignIn(object, [sources])
:与assign类似,但也会将源对象的不可枚举属性分配给目标对象。_.assignWith(object, sources, [customizer])
:与assign类似,但可以自定义分配过程。_.assignInWith(object, sources, [customizer])
:与assignIn类似,但可以自定义分配过程。_.at(paths)
:创建一个函数,该函数返回给定路径的值。_.values(object)
:创建一个数组,包含对象的所有值。_.valuesIn(object)
:创建一个数组,包含对象的所有可枚举和不可枚举的值。
Lodash 中api 和javascript中api有什么不同
Lodash 是一个 JavaScript 实用工具库,提供了许多用于处理数组、对象和其他数据结构的函数。
它是一个库,而不是语言本身的一部分 ,因此它的 API 是通过函数和方法来实现的,而不是通过内置的 JavaScript 关键字和语法。
以下是一些 Lodash 和 JavaScript 中 API 的不同之处:
- 函数和方法:Lodash 提供了许多函数和方法,如
_.map
、_.filter
、_.reduce
等,而 JavaScript 本身也有一些内置的函数和方法,如Array.prototype.map
、Array.prototype.filter
、Array.prototype.reduce
等。Lodash 的函数和方法通常更通用,可以处理不同类型的集合,而 JavaScript 的内置函数和方法通常只能处理数组。 - 链式调用:Lodash 允许通过链式调用来组合多个函数,这使得代码更简洁和易于阅读。而 JavaScript 本身并不支持链式调用,但可以通过手动返回对象或数组来实现类似的效果。
- 类型检查:Lodash 提供了许多类型检查函数,如
_.isArray
、_.isObject
、_.isString
等,可以方便地检查值的类型。而 JavaScript 本身也有一些类型检查的方法,如typeof
运算符和instanceof
运算符。 - 实用工具:Lodash 还提供了一些实用工具函数,如
_.debounce
、_.throttle
、_.noop
等,可以方便地解决一些常见问题。而 JavaScript 本身并没有这些函数。 - 语法和语义:Lodash 的 API 是通过函数和方法来实现的,因此它的语法和语义与 JavaScript 的内置 API 有所不同。例如,Lodash 的
_.map
函数需要传入一个集合和一个 iteratee 函数作为参数,而 JavaScript 的Array.prototype.map
方法只需要传入一个回调函数作为参数。
总之,Lodash 是一个强大的实用工具库,提供了许多方便的函数和方法来处理集合和值。
虽然它与 JavaScript 的内置 API 有一些不同之处,但它可以使代码更加简洁、易于阅读和维护。
react中如何使用Lodash
在React中使用Lodash库非常简单。首先,确保你已经在项目中安装了Lodash。你可以使用npm或yarn来安装Lodash。
使用npm:
npm install lodash
使用yarn:
yarn add lodash
安装完成后,你可以在React组件中引入Lodash并使用它的功能。下面是一个简单的示例:
import React from 'react';
import _ from 'lodash';
class MyComponent extends React.Component {
componentDidMount() {
const array = [1, 2, 3, 4, 5];
const sum = _.sum(array);
console.log(sum); // 输出:15
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
export default MyComponent;
在上面的示例中,我们在组件的componentDidMount
生命周期方法中使用了Lodash的_.sum
函数来计算数组的和,并将结果打印到控制台。
你可以根据自己的需求使用Lodash提供的其他函数。
需要注意的是,Lodash库体积相对较大,如果你只使用其中一小部分函数,建议采用按需引入的方式,以减小最终的打包体积。
你可以使用lodash-es
或lodash-webpack-plugin
来实现按需加载。具体的方法和配置可以参考相关文档。