React Loops 尝鲜

一个简单的Loops

我们先来实现一个简单的需求，使用 React 打印 数组 中的数据并显示

相信聪明的你早已想到了解决方案，以下是我的实现

import React from 'react'

const List = () => {
  const arr = [1, 2, 3, 4]
  
  return (
    <ul>
      {
        arr.map((item, index) => <li key={index}>{item}</li>) // 需要带上 key 属性
      }
    </ul>
  )
}

export default List
复制代码

使用 ES6 的 map 方法遍历并返回 <li></li> 结构

我们再来看看使用 loops 的版本

使用 loops 前我们首先要安装 react-loops
npm install react-loops 或者 yarn add react-loops

import React from 'react'
import { For } from 'react-loops' // 引入 react-loops

const List = () => {
  const arr = [1, 2, 3, 4]

  return (
    <div>
      <For of={arr} as={item => <li>{item}</li>} /> // 可省略 key 属性
    </div>
  )
}

export default List
复制代码

你会发现使用 loops 后，只是替换了之前的 map 方法，以一个 <For /> 标签的形式来遍历数据，of 属性中写入需要遍历项，as 则类似于 map 方法中的回调函数。但其实内部做了很多优化和封装。
值得注意的是，在使用第一种方法时，为了 diff 算法优化，我们必须带上 key 属性，否则浏览器会报警告错误。

而使用 loops 后，其内部会为每项自动注入 key 属性，省去我们手动操作或是遗漏带来的麻烦。

为什么会有Loops

增强代码语义化

loops 译为'循环'，顾名思义是为了优化 React 中的循环操作。 它以其独特的 <For /> 标签的形式，使团队开发的代码风格更加统一化，并具有良好的可读性。而loops 的出现，本身是受到了 Angular(ng-repeat) 和 Vue(v-for) 指令语法的启发，熟悉 Angular 或 Vue 的朋友们应该会有既视感。三大框架的发展本质就是相互学(抄)习(袭)和启发的过程。

让For标签一统循环界江湖

我们知道在 JS 中有许多可遍历结构，除数组之外，还有伪数组、对象、Map、Set...可迭代结构，这个时候我们需要针对不同存储结构来进行遍历方法的选择。比如我们现在修改一下之前的需求

使用 React 打印 对象 中的数据并显示

此处思考一分钟，聪明的你可以想想如何实现。

我们知道对象身上是没有 map 方法的，这时我们需要先将对象的 key 转为一个数组的集合，再使用 map 方法来进行操作。

import React from 'react'

const List = () => {
  const obj = {
    name: 'z',
    age: 20
  }

  return (
    <ul>
      {
        // Object.keys(obj) => ['name', 'age']
        Object.keys(obj).map(item => <li key={item}>{obj[item]}</li>) // 需要带上 key 属性
      }
    </ul>
  )
}

export default List
复制代码

又或者我们可以使用 for in 循环来遍历这个对象得出遍历结果并打印。可以发现遍历的方法有很多种，而 loops就是为了统一循环风格而生，可遍历项均可以使用一个 <For /> 标签来实现，值得注意的是，在遍历 对象 时，我们需要用 <For /> 标签上的 in 属性，这个后面详细说明。

import React from 'react'
import { For } from 'react-loops'

const List = () => {
  const obj = {
    name: 'z',
    age: 20,
  }

  return (
    <div>
      // 遍历对象时，需要使用 in 属性
      <For in={obj} as={item => <li>{item}</li>} /> // 可省略 key 属性
    </div>
  )
}

export default List
复制代码

怎样使用Loops

在使用 loops 时，分为两种情况

• 遍历数组、伪数组、Iterables(可迭代对象 Map、Set等)
• 遍历对象

For-of Loops

在使用 of 属性时，我们可以接收数组、伪数组、Iterables(可迭代对象 Map、Set等)

const arr = [1, 2, 3, 4] // 可以接收数组
const arrLike = { 0: 'z', 1: 'h', length: 2 } // 可接收伪数组
const setLoop = new Set([1, 2, 3, 4]) // 可接收 Set
const mapLoop = new Map([['name', 'z'], ['age', 20]) // 可接收 Map

return (
  <div>
    <For of={arr} as={item => <li>{item}</li>} />
  </div>
)
复制代码

而 as 属性则类似于 map 方法的回调函数，当然你也可以不用 as 属性，这时需要将回调函数嵌套在 <For></For> 中

return (
  <For of={arr}>
    {item => <li>{item}</li>}
  </For>
)
复制代码

当然 as 这个回调函数在 map 方法之上又做了一层封装，其第二个参数非常特别，它给我们提供了一些与遍历有关的属性。

return (
  <div>
    // metadata 为回调函数的第二个参数
    <For of={arr} as={(item, metadata) => {
      console.log(metadata) // 打印输出 metadata
      
      return <li>{item}</li>
    }} />
  </div>
)
复制代码

我们先打印输出下第二个参数

• index --- 遍历项标记值，从0开始，类似于 map((item, index) => {}) 中的 index
• isFirst --- 是否为第一项
• isLast --- 是否为最后一项
• key --- 遍历项的键，数组为其下标，对象为对象的 key
• length --- 遍历项数目

有了这些属性，我们可以通过解构的方式来取出需要使用的数据。例如我们要手动添加 key 时，便可以从第二个参数中取出

return (
  <div>
    // {key} 解构出 key 的值
    <For of={arr} as={(item, {key}) => <li key={key}>{item}</li>} />
  </div>
)
复制代码

For-in Loops

在我们需要遍历一个对象时，需要使用 For-in 的结构 <For in={obj} />
还是引用上述例子

const List = () => {
  const obj = {
    name: 'z',
    age: 20,
  }

  return (
    <div>
      // 遍历对象时，需要使用 in 属性
      <For in={obj} as={item => <li>{item}</li>} />
    </div>
  )
}
复制代码

原因其实很简单，我们可以类比于 for in 循环

const obj = {
  name: 'z',
  age: 20,
}

for(let key in obj) {
  ...
}
复制代码

如果我们尝试用 For-of 来遍历对象（伪数组除外），会发现浏览器报错

意思就是 For-of 只对数组、伪数组、Iterables(可迭代对象 Map、Set等)有效。
我们再尝试看看源码是如何判断

function For(props) {
  ...
  // 如果使用的是 of 属性
  var list = props.of;
    
  if (!list) {
    return null;
  }
    
  // 判断是否为数组
  if (!Array.isArray(list)) {
    // 不是数组就判断是否为集合 ( 伪数组 和 Iterable(Map、Set) )
    if (!iterall.isCollection(list)) {
      // 不是数组，也不是集合，则抛出异常
      throw new TypeError(
        "<For> `of` expects an Array, Array-like, or Iterable collection"
      );
    }
    
    // 是数组，将用新数组存放
    var array = [];
    iterall.forEach(list, function(item) {
      array.push(item);
    });
    list = array;
  }
    
  ...
}

// 判断是否为集合
function isCollection(obj) {
  // 如果是对象，但对象只能是 伪数组 和 Iterable(Map、Set)
  return Object(obj) === obj && (isArrayLike(obj) || isIterable(obj));
}
复制代码

结尾

通过这几个小例子的学习，可以发现 loops 确实是非常简单而且好用的 react 遍历工具。是轮子就有它存在的意义，如果你厌倦了手写JS遍历，不妨也来尝尝 loops，或许你就会喜欢上这个小而巧的库。

react-loops 地址：react-loops
demo 地址：github

转载于:https://juejin.im/post/5ca467fa51882543ed41b269