在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

2. 创建Immutable数据

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

import { List } from 'immutable';

const myList = List([1, 2, 3]);

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} />;
}

4. 使用Immutable.js的方法操作数据

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

import { List } from 'immutable';

const myList = List([1, 2, 3]);
const newList = myList.push(4);

5. 在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.map、Array.prototype.filter、Array.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 (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default MyComponent;

在上面的示例中，我们在组件的componentDidMount生命周期方法中使用了Lodash的_.sum函数来计算数组的和，并将结果打印到控制台。

你可以根据自己的需求使用Lodash提供的其他函数。

需要注意的是，Lodash库体积相对较大，如果你只使用其中一小部分函数，建议采用按需引入的方式，以减小最终的打包体积。

你可以使用lodash-es或lodash-webpack-plugin来实现按需加载。具体的方法和配置可以参考相关文档。