在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的步骤:

  1. 安装Immutable.js

使用npm或yarn将Immutable.js添加到你的项目中:

npm install immutable

yarn add immutable
  1. 创建Immutable数据

使用Immutable.js创建不可变数据。例如,你可以创建一个不可变的列表:

import { List } from 'immutable';

const myList = List([1, 2, 3]);
  1. 在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} />;
}
  1. 使用Immutable.js的方法操作数据

使用Immutable.js的方法操作不可变数据。例如,你可以使用push方法向列表中添加一个元素:

import { List } from 'immutable';

const myList = List([1, 2, 3]);
const newList = myList.push(4);
  1. 在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的特性包括:

  1. 迭代器实用程序:例如 map, filter, reduce, each 等。
  2. 实用程序:例如 debounce, throttle, cloneDeep 等。
  3. 性能:Lodash的函数都是高性能的,它们经过优化以提高执行速度。
  4. 链式调用:Lodash允许通过链式调用来组合多个函数。
  5. 兼容性:Lodash与大多数JavaScript环境兼容,包括Node.js和浏览器。
  6. 可扩展性:可以通过添加自己的函数来扩展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分类:

  1. 集合方法(Collection Methods):这些方法是用于操作数组、对象和其他集合类型的工具。例如,_.map_.filter_.reduce_.find等。
  2. 数组方法(Array Methods):这些方法专门用于处理数组。例如,_.isArray_.isEmpty_.first_.last_.times等。
  3. 对象和属性方法(Object and Property Methods):这些方法是用于操作对象和属性的工具。例如,_.assign_.has_.property_.matcher等。
  4. 实用方法(Utility Methods):这些方法提供了一些通用的工具和功能。例如,_.debounce_.throttle_.noop_.constant_.uniqueId等。
  5. 函数方法(Function Methods):这些方法用于创建和操作函数。例如,_.isFunction_.isNil_.isNaN_.isNull_.isUndefined等。
  6. 类型检查方法(Type Checking Methods):这些方法用于检查值的类型。例如,_.isArray_.isObject_.isString_.isNumber_.isBoolean等。
  7. 赋值和合并方法(Assignment and Merging Methods):这些方法用于合并对象和分配值。例如,_.assign_.assignIn_.assignWith_.assignInWith等。
  8. 其他方法(Miscellaneous Methods):这些方法无法归类到其他类别中。例如,.now().VERSION等。

这只是Lodash API的一个粗略分类,实际上Lodash提供了很多其他的方法和功能,可以根据具体需求查阅Lodash的官方文档以获取更详细的信息。

Lodash中常用的API介绍:

Lodash是一个流行的JavaScript实用工具库,提供了许多用于处理数组、对象和其他数据结构的函数。

  1. _.map(collection, [iteratee=_.identity]):对集合中的每个元素应用iteratee函数,并返回一个新的数组。
  2. _.filter(collection, [predicate=_.identity]):创建一个新数组,包含通过所提供函数实现的测试的所有元素。
  3. _.reduce(collection, [iteratee=_.identity], [accumulator]):通过对集合中的每个元素执行一个reducer函数,将其减少为单个值。
  4. _.debounce(func, [wait=0], [options]):创建一个debounced函数,该函数只会在指定的wait时间后执行func。
  5. _.throttle(func, [wait=0], [options]):创建一个throttled函数,该函数只会在指定的wait时间内执行func。
  6. _.find(collection, [predicate=_.identity]):在集合中查找满足提供条件的第一个元素,并返回该元素的值。
  7. _.every(collection, [predicate=_.identity]):检查集合中的所有元素是否都满足提供的条件。
  8. _.some(collection, [predicate=_.identity]):检查集合中是否存在至少一个元素满足提供的条件。
  9. _.isEqual(value, other):执行深度比较,以确定两个值是否相等。
  10. _.isEmpty(value):检查值是否为空。
  11. _.isNil(value):检查值是否为null或undefined。
  12. _.isArray(value):检查值是否为数组。
  13. _.isObject(value):检查值是否为对象。
  14. _.isString(value):检查值是否为字符串。
  15. _.isNumber(value):检查值是否为数字。
  16. _.isBoolean(value):检查值是否为布尔值。
  17. _.isFunction(value):检查值是否为函数。
  18. _.isDate(value):检查值是否为日期对象。
  19. _.isRegExp(value):检查值是否为正则表达式对象。
  20. _.isNaN(value):检查值是否为NaN(非数字)。
  21. _.isNull(value):检查值是否为null。
  22. _.isUndefined(value):检查值是否为undefined。
  23. _.uniqueId([prefix]):生成一个唯一的ID字符串,可以传入前缀。
  24. _.times(n, [iteratee=_.identity], [thisArg]):创建一个数组,通过调用 iteratee 函数 n 次,并将结果存储在数组中。
  25. _.noop():返回一个空函数。
  26. _.constant(value):返回一个总是返回指定值的函数。
  27. _.property(path):创建一个函数,该函数返回给定对象的指定路径的值。
  28. _.propertyOf(object):创建一个函数,该函数返回给定对象的路径的键。
  29. _.matcher(props):创建一个匹配给定属性的函数。
  30. _.matches(source):创建一个匹配给定对象的函数。
  31. _.assign(object, [sources]):将源对象的所有可枚举属性分配给目标对象。
  32. _.assignIn(object, [sources]):与assign类似,但也会将源对象的不可枚举属性分配给目标对象。
  33. _.assignWith(object, sources, [customizer]):与assign类似,但可以自定义分配过程。
  34. _.assignInWith(object, sources, [customizer]):与assignIn类似,但可以自定义分配过程。
  35. _.at(paths):创建一个函数,该函数返回给定路径的值。
  36. _.values(object):创建一个数组,包含对象的所有值。
  37. _.valuesIn(object):创建一个数组,包含对象的所有可枚举和不可枚举的值。

Lodash 中api 和javascript中api有什么不同

Lodash 是一个 JavaScript 实用工具库,提供了许多用于处理数组、对象和其他数据结构的函数。

它是一个库,而不是语言本身的一部分 ,因此它的 API 是通过函数和方法来实现的,而不是通过内置的 JavaScript 关键字和语法。

以下是一些 Lodash 和 JavaScript 中 API 的不同之处:

  1. 函数和方法:Lodash 提供了许多函数和方法,如 _.map_.filter_.reduce 等,而 JavaScript 本身也有一些内置的函数和方法,如 Array.prototype.mapArray.prototype.filterArray.prototype.reduce 等。Lodash 的函数和方法通常更通用,可以处理不同类型的集合,而 JavaScript 的内置函数和方法通常只能处理数组。
  2. 链式调用:Lodash 允许通过链式调用来组合多个函数,这使得代码更简洁和易于阅读。而 JavaScript 本身并不支持链式调用,但可以通过手动返回对象或数组来实现类似的效果。
  3. 类型检查:Lodash 提供了许多类型检查函数,如 _.isArray_.isObject_.isString 等,可以方便地检查值的类型。而 JavaScript 本身也有一些类型检查的方法,如 typeof 运算符和 instanceof 运算符。
  4. 实用工具:Lodash 还提供了一些实用工具函数,如 _.debounce_.throttle_.noop 等,可以方便地解决一些常见问题。而 JavaScript 本身并没有这些函数。
  5. 语法和语义: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-eslodash-webpack-plugin来实现按需加载。具体的方法和配置可以参考相关文档。

你可能感兴趣的:(前端杂货铺,javascript,react.js,前端)