在React中使用Immutable.js
- Immutable 的几种数据类型
- 在React中使用Immutable.js
- 实例
- 扩展 Lodash
- Lodash 常用api分类
- Lodash中常用的API介绍：
- Lodash 中api 和javascript中api有什么不同
- react中如何使用Lodash
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 (
Hello, World!
);
}
}
export default MyComponent;
在上面的示例中，我们在组件的componentDidMount生命周期方法中使用了Lodash的_.sum函数来计算数组的和，并将结果打印到控制台。
你可以根据自己的需求使用Lodash提供的其他函数。
需要注意的是，Lodash库体积相对较大，如果你只使用其中一小部分函数，建议采用按需引入的方式，以减小最终的打包体积。
你可以使用lodash-es或lodash-webpack-plugin来实现按需加载。具体的方法和配置可以参考相关文档。