開源日報每天推薦一個 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》