開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年2月2日，開源日報第1093期：
今日推薦開源項目：《telegram_media_downloader》
今日推薦英文原文：《Why Can』t You Export Arrow Function Components as Default Exports in React?》

開源項目

今日推薦開源項目：《telegram_media_downloader》傳送門：項目鏈接

推薦理由： 基於Dineshkarthik的項目， 電報視頻下載，電報資源下載，跨平台，支持web查看下載進度 ，支持bot下髮指令下載，支持下載已經加入的私有群但是限制下載的資源

英文原文

今日推薦英文原文：Why Can』t You Export Arrow Function Components as Default Exports in React?

推薦理由：文章解釋為什麼在React中不能將箭頭函數組件作為默認導出進行內聯，同時比較了普通函數和箭頭函數的差異，以及JavaScript中命名導出和默認導出的區別

Why Can』t You Export Arrow Function Components as Default Exports in React?

Function components offer React developers several upgrades and shortcuts compared to class-based components. The new features make it easier to write clear and concise code. With function components, you can create your components using the function keyword, or with the ES6 arrow function syntax. If you have worked with arrow functions in React, you have probably run into a syntax error while trying to inline export your component as the default export. Why can you not inline default export your React arrow function component?

Differences between Normal and Arrow Functions in JavaScript

ES6, also known as the 2015 edition of ECMAScript, brought a lot of new features to JavaScript. One of the most popular features was the inclusion of arrow function syntax to define functions. Arrow functions consist of anonymous functions assigned to variables. These functions are lightweight in both syntax and features as they lack many normal function features.

JavaScript functions are first-class objects within JavasScript. This allows them to be passed to other functions, and assigned to variables and properties. This gives developers incredible flexibility when adding functionality to their code.

Normal functions include features like a built-in arguments variable, self-referencing this bindings, and constructors. Arrow functions do not include any of these features.

Another difference between normal and arrow functions is the way they are defined. This difference comes down to function declarations and function expressions. When you define a normal function, you use the keyword function with your function name to declare the function:

// Normal Function
function addNumbers(a, b) {
    return a + b;
}

When we define an arrow function, we do not have a function declaration but instead use function expressions. Here we have an anonymous function. This is an expression of how the function performs. We then assign the expression to a variable name:

// Function Expression | Anonymous Function
(a, b) => {
    return a + b;
}

// Arrow Function
const addNumbers2 = (a, b) => {
    return a + b;
}

How we define the functions is why we cannot inline the default export arrow function for React components. We will explain exactly why after we discuss named and default exports

Differences between Named and Default Exports in JavaScript

A key aspect of good code is adhering to the DRY (don』t repeat yourself) principle. To adhere to this principle, we break up code into reusable chunks. These chunks are often referred to as modules. Code modules can be shared and used across several different files or programs.

To make JavaScript easier to work with, we have the module system. This allows us to define and export almost anything (because almost everything in JavaScript is an object or primitive value) for use in other project files. We have two tools to do this: named exports and default exports.

The difference between these tools is in their names. There can only be one default export because it is the value or object imported if no other information is provided in the import statement. You can have an infinite number of named exports as long as each export has a unique name. Here is an example of a multi-named and single default export module with matching import statements:

export default function addTwoNumbers(a, b) { return a + b };
export const addThreeNumbers = (a, b, c) => { return a + b + c };
export const multiplyThreeNumbers = (a, b, c) => { return a * b * c };

// In Another File Import Methods
import firstMethod, { addThreeNumbers, multiplyThreeNumbers } from './mathMethods';

We can have a function expression with named exports, but not default exports. When we default export, we assign the value we want to export to the default keyword. Files that import the default export can rename this value to anything they wish.

With named exports, we are simply exporting the given value, not assigning the value to a keyword. Files that import named exports must use the variable name given in the named export expression.

Why We Cannot Inline Default Export Arrow Function Components in React

With what we have learned above, it should be clear why we cannot inline default export arrow function components in React. Arrow functions are function expressions, not function declarations. Because of this, when we define an arrow function, we create an anonymous function and assign the expression to a variable.

When performing a default export for a variable, we create a reference to this variable by assigning its value to default. When we see these combined concepts, we see that attempting to inline default export arrow functions leads to double variable declaration, which is an invalid syntax.

We need to perform these operations one at a time. First, we create our arrow function by declaring a variable and assigning the function expression to this variable. After the arrow function assignment, we can assign this variable』s value to the default keyword in our default export statement. Now our arrow function is available to other files as the default export.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/