開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
今日推薦開源項目：《實驗用數據 generatedata》
今日推薦英文原文：《The Pros and Cons of Functional Components in React》

今日推薦開源項目：《實驗用數據 generatedata》傳送門：項目鏈接
推薦理由：有些項目在運行的時候需要對數據進行處理——很明顯你需要一些數據來測試它們能否正常工作。這個項目能夠生成各種各樣的數據，上到各種隨機公司名與人物姓名，下到隨機日期和隨機數，涵蓋了相當廣的需求。如果這還不能滿足你手上某個奇奇怪怪的需求，它們也提供了開發者文檔以供其他人對其進行擴展，剩下的工作就是自己動手豐衣足食了。

今日推薦英文原文：《The Pros and Cons of Functional Components in React》作者：Rianna Cleary
原文鏈接：https://medium.com/better-programming/pros-cons-of-functional-components-in-react-f52bded98db0
推薦理由：在 React 中函數組件相較於類組件的優缺點介紹

The Pros and Cons of Functional Components in React

Are functional components better to implement than class components? If so, why?

In this article, I』m going to be explaining what functional components are and when you should use them in your applications! First, I』ll be doing a quick overview of class components. Then, we』ll jump into functional components.

What Are Class Components?

Class components are sometimes categorized as smart or stateful components because they implement logic and state. They』re ES6 classes and contain the Component class in React. Lifecycle methods can be used inside these components ( componentDidUpdate, componentDidMount, etc.). Class components are a bit more complex because you have to keep track of not only lifecycle methods but also their side effects such as re-rendering, and data flow management.

import React, { Component } from "react";

class Planet extends Component {
 state = {
  message: ''
}
 render() {
    return (
      <div>
        <h1>Hello from Planet!</h1>
      </div>
    );
  }
}

export default Planet;

Functional Components

Functional components are JavaScript (or ES6) functions that return React elements. They』re a bit easier to understand because there isn』t as much going on as there would be in a class component. They can also be written as a simple JS functions or as an arrow function using ES6 syntax, and their props are passed in as arguments (if any).

function Planet() {
 return (<h1>This is a functional component!</h1>);
};
//OR//
const Planet = () => {
 return (<h1>I'm also a functional component!</h1>)
};

Unlike class components, functional components are stateless, which means that there are no lifecycle methods or state management. However, with React Hooks, there are provided functions for us to do so, such as useState() & useEffect(). To learn more about hooks, please check out the documentation.

Pros

Easier to test: You don』t have to worry about hidden state and there aren』t as many side effects when it comes to functional components, so for every input, the functions will have exactly one output.
Easier to read/write: The syntax is less complex than that of class components, and it』s easier to read due to knowing how much you can』t do with functional components already. The use of prop destructuring makes it really beneficial to see what』s going on and what』s coming out of the component.
Easier to debug: Again, functional components depend on the props they are given and don』t reply on state. There isn』t a reason to console.log() your state to constantly understand the changes that are going on.

Cons

Relearning new syntax: The syntax could be unusual at first glance and difficult to pick up because of how long class components have been around. In classes, you declare a render function. With functions, you don』t. For passing around props in classes, you could either send them as class properties to the component or declare default props below the component. In contrast, functional components send props as arguments. Differences like these can be challenging for other devs to understand if they』re not used to writing their apps this way.
Performance optimization: There isn』t really a difference in terms of which components benefit you more performance-wise; however, since functional components don』t have access to methods like shouldComponentUpdate and PureComponent, it could be a bit of an inconvenience to optimize them for performance.

Conclusion

Functional components are sort of becoming equal to class components in terms of functionality. Developers usually used functional components if they were just rendering something and didn』t need to pass state around or use lifecycle methods. Although, as mentioned before, hooks were introduced with React version 16.8. This has allowed developers to use lifecycle methods and state with functional components! It』s not recommended to go back into your apps and convert your classes to functional components because there』s a difference between how state is manipulated and how lifecycles work. Definitely give functional components a try in newer applications, and you』ll be amazed to see what you can create!

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

generatedata

開源日報第833期：《實驗用數據 generatedata》