开源日报每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。

2024年1月18日，开源日报第1078期：
今日推荐开源项目：《fish-shell》
今日推荐英文原文：《React — Each and Of Pattern》

开源项目

今日推荐开源项目：《fish-shell》传送门：项目链接

推荐理由：界面友好的命令行shell适用于macOS、Linux和其他系统，fish具有语法高亮、实时自动建议以及精美的标签补全等功能，无需任何配置开箱即用

官网直达：fishshell.com

英文原文

推荐理由：本文介绍了React中的"Each"和"Of"模式并引出了一种使用组件的新方式，该组件接收of和render作为props，通过遍历of数组并调用render函数进行渲染，但在代码可读性上更好，尤其在需要处理key属性、传递额外列表特定功能（如排序或过滤回调）能够使代码更简洁

React — Each and Of Pattern

Each and Of in React

React is one of the most popular frontend libraries of today's date and everyone has their way of working on things. Some prefer using Redux, some prefer using Context, and others prefer working with regular state only. It highly depends upon what application we are working on and what the complexity of that application is. The same goes with rendering trees, Many people work with Render props patterns and some think Object Oriented programming in React is more better

Object Oriented Programming in ReactUsing object-oriented programming for your function component in React applicationjavascript.plainenglish.io

React’s Render Props Pattern: A Comprehensive GuideExplore React’s Render Props: Flexible, Reusable Components for Real-World Apps.javascript.plainenglish.io

Each and Or Pattern

In the same way, rendering also differs, Array in Javascript has lots of methods and techniques that you can use while rendering your tree for list or map-like objects, some of being

Use Map

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

Use For loop and variations

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

// inside render

{
  renderCustomers()
}

All of them have their own pros and cons. It all depends upon what output we want to achieve with this. There is one more way to list over all your list items and get more out of it

// in render

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

Question — What is the benefit of this approach?

Well, there ain’t any benefit that we can’t achieve with other methods but long story short. This will look good in front of your friends and colleagues. But let me name a few so that we can add more to your program

No need to worry about key property of rendering your cards
Pass additional list-specific features like sort or filter callback
Give a search functionality that will be generic to all of your list

You can name more than this but as I said, there are no benefits that you can’t create with a regular approach.

Implementation

Now, how to achieve this, as what it looks. We need to create a component name Each that needs to be generic so that any component and list can access it without having to worry about it.

import { Children } from 'react';

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

Now, our component is ready to take some action. Since it is a React component only, this Higher-order function will have support for all the states, hooks, and other features that React offers for components.

You can also make it more advanced by giving options to perform operations on data like the following:

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)
        })
    )
}

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

Conclusion

If you ever have to work with similar lists then do consider using Each-of pattern to generalize your list rendering and make the most use of it, and I hope you learn something new today. Happy coding!

下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/

开源日报第1078期：界面友好的命令行工具：《fish-shell》