React 中的 Each 和 Of

React 中的 Each 和 Of

React 是当今最流行的前端库之一,每个人都有自己的工作方式。有些人更喜欢使用 Redux,有些人更喜欢使用 Context,还有些人更喜欢只使用常规状态工作。这在很大程度上取决于我们正在开发的应用程序以及该应用程序的复杂性。渲染树也是如此,许多人使用 Render props 模式,有些人认为 React 中的面向对象编程更好。

Each 和 Of 模式

同样,渲染也有所不同。Javascript 中的数组有很多方法和技术,您可以在为列表或映射类对象渲染树时使用它们,其中一些是:

使用 Map

{
  customers.map((customer) => {
    return <CustomerCard key={customer.id} customer={customer} />
  }) 
}

使用 For 循环和变体

// 渲染之前

const renderCustomers = () => {
  const cards = []
  for(let i = 0; i < customers.length; i++){
    cards.push(<CustomerCard customer={customers[i]}>)
  }
  return cards; 
}

// 在渲染中

{
  renderCustomers()
}

它们都有自己的优点和缺点。这完全取决于我们想要通过这个实现的输出是什么。还有一种在所有列表项上列出的方法,可以从中获得更多内容

// 在渲染中

<Each of={customers} render={(customer) => {
  return <CustomerCard customer={customer} />
}} />

问题 — 这种方法的好处是什么?

好吧,没有什么好处是我们不能通过其他方法实现的,长话短说。这在你的朋友和同事面前看起来不错。但是让我列出一些名字,这样我们就可以为你的计划增加更多内容:

- 不需要担心呈现卡片的 key 属性

- 传递额外的列表特定功能,如排序或筛选回调

- 提供对所有列表通用的搜索功能

你可以比这更多,但正如我所说的,没有任何好处是你不能用普通方法创造的。

实现

现在,如何实现这一点,就像它看起来的那样。我们需要创建一个名为 Each 的组件,该组件需要是通用的,以便任何组件和列表都可以访问它,而不必担心它。

import { Children } from 'react';

export const Each = ({ render, of }) => {
  return Children.toArray(
    of.map((item, index) => {
      return render(item, index)
    })
  )
}

现在,我们的组件已经准备好采取行动了。由于它只是一个 React 组件,这个高阶函数将支持 React 为组件提供的所有状态、钩子和其他功能。

您还可以通过提供执行数据操作的选项(如下所示)使其更高级:

import { Children } from 'react';  

export const Each = ({ render, of, options }) => {
  if(options.filter){
    return Children.toArray(
      of.filter(options.filter)
      .map((item, index) => {
        return render(item, index)  
      })
    )
  }
  return Children.toArray(  
    of.map((item, index) => {
      return render(item, index)
    })
  )
}

// 用法

<Each of={customers} 
  options = {  
    {
      filter: (customer) => !customer.isBlocked  
    }
  }
  render={(customer) => {
    return <CustomerCard customer={customer} />
  }}  
/>