ReactJS：功能组件和类组件之间有什么区别

Question

任何人都可以详细解释ReactJS中功能组件和类组件之间的区别吗？

当我们使用功能组件时以及何时使用类组件？

Answer 1

这里有一个great article, "Presentational and Container Components"，丹·阿布拉莫夫可以帮助你。

这是我理解这一点的 tl; dr; ：

1. 如果符合以下条件，您必须使用class CreatePostForm extends Component {}或React.createClass()

   • 您需要访问您的component's lifecycle methods （即：componentWillMount或componentDidMount） - 注意：自React 16.8以来，不再需要是的，我强烈建议您阅读React Hooks，因为一旦您对它们感到满意，它们可以使事情变得更简单;
   • 您的组件可以直接访问您的商店，因此保持状态（有些人也称这种组件，智能组件或容器）。

2. 当您的组件只接收道具并将其渲染到页面时，您就拥有了一个“无状态”组件＆＃39; （有些人将这些组件称为哑组件或表示组件）并且可以使用纯函数来表示它，它可以像这样简单

   import React from 'react'; export default () => <p>Hello from React!</p>;

现在，重要的是要记住纯函数可能比这更复杂，如果您对某些ESNext语法以及解构和传播属性感到满意，您可以使用一个表示组件来查看像这样：

import React from 'react';
import AnotherComponent from './AnotherComponent';

export default ({ children, ...rest }) =>
    <AnotherComponent extraProp="anExtraProp" { ...rest }>
        { children }
    </AnotherComponent>;

希望这有帮助。

Answer 2

功能无状态组件（您错过的中间词是重要的组件）只是一个'哑'功能，它将道具作为输入并输出标记。他们没有任何州或方法或类似的东西。只需(props) => { return <span>props.foo</span>; }

类组件可以包含状态，变量，方法等。

Answer 3

看到这张照片。我太晚了，但我会帮助其他人。

图片来源为Udemy Course

Answer 4

功能组件：使用简单的javascript函数定义组件。 它使用道具作为输入（无状态）

类组件：使用类定义组件（状态组件）

Answer 5

除了语法上的明显区别外，当您的组件需要存储和操作自己的内部状态时，或者当您的组件需要内部状态时，还需要使用 class组件而不是 function组件。您需要访问componentDidMount等几种生命周期方法，以执行网络操作，操作DOM，与第三方库进行交互等

我建议您看一下有关React.Component API的React文档（https://reactjs.org/docs/react-component.html），以找到所有生命周期方法和状态API的详细说明。

Answer 6

功能组件：

1. 这些组件是无状态的组件，没有反应生命周期方法。
2. 这些组件可用于演示目的。
3. 这些组件易于调试，测试。

类组件：

1. 这些组件是有状态组件，可以通过扩展React组件来支持React生命周期方法。
2. 当您要创建方法，组件的状态时可以使用这些组件。

Answer 7

功能（无状态）组件

功能组件基本上是一个JavaScript函数，该函数返回React元素。它接受props作为参数并返回有效的JSX

类（有状态）组件

类组件比功能组件（包括构造函数，生命周期方法，render（）函数和状态（数据）管理）更为复杂。类组件是ES6类。

使用功能组件的好处

1. 功能组件易于测试。
2. 它可以具有更好的性能。
3. 功能组件易于调试。
4. 最终得到的代码更少。
5. 它可以帮助您使用最佳做法。
6. 功能组件可以减少耦合。

更多click here

Answer 8

1-功能组件更易于阅读和测试，因为它们是普通的JavaScript函数，没有状态或生命周期的钩子

2-您最终得到的代码更少

3-他们可以帮助您使用最佳做法。分离容器组件和演示组件将变得更加容易，因为如果您无法访问组件中的setState（），则需要更多考虑组件的状态

4-React团队提到，未来的React版本中功能组件的性能可能会提高

Answer 9

在 React 的世界中，有两种编写组件的方法，一种使用函数，另一种使用类。下面的例子展示了编写同一个组件的两种方式

功能组件

import React from "react";
function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

类组件

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

在最近发布的 React 中，选择何时编写取决于开发人员的偏好。两种风格各有利弊，但在可预见的未来，功能组件正在取代现代 React。因为我们可以用类组件做的一切现在也可以用功能组件来实现，所以它可以写得更短更简单，这使得开发、理解和测试更容易

React 团队正在为功能组件支持更多 React 钩子，以替代甚至改进类组件。他们在之前的版本中提到他们将make performance optimizations in functional components by avoiding unnecessary checks and memory allocations。尽管听起来很有希望，但最近为 useState 或 useEffect 等功能组件引入了新的钩子，同时还承诺它们不会过时的类组件，而是推荐 gradual adoption strategy。< /p>

Answer 10

功能组件是一个使用工作的钩子，使用状态和要使用的任何其他钩子函数以及动态数据显示，然后在reactjs中对功能组件存在一些问题

类组件是一种用于与功能组件进行比较和日间数据更新然后轻松工作的简便方法。类组件是状态和道具用来将运行时数据传递给组件的状态。