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