开源日报每天推荐一个 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/