在 React 中类组件和函数组件之间做出选择

由柏拉图重新发布

关注： 0

在 React PlatoBlockchain 数据智能中选择类组件和函数组件。垂直搜索。人工智能。

核心差异

在 React 中，组件是代表用户界面一部分的一段代码。 React 中有两种主要类型的组件：类组件和功能组件。

类组件是使用扩展 React.Component 类的类定义的。它们功能更丰富，并且有更多选项来处理状态和生命周期事件。这是类组件的样子：

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

函数式组件只是返回 React 元素的 JavaScript 函数。它们比类组件更简单，更易于阅读和编写。这是与上面相同的组件，编写为功能组件：

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

什么时候用什么

通常，除非需要使用仅在类组件中可用的功能（例如状态或生命周期方法），否则您应该使用功能组件。
有几个原因为什么你可能更喜欢 在功能组件上使用类组件:

可读性: 类组件可以使代码更容易理解，尤其是当你有很多状态或生命周期方法时。代码被组织成定义明确且易于查找的方法。
雷乌斯能力：类组件可以更容易地重用，因为它们可以被扩展以创建新的组件。如果组件之间有很多共享功能，这将特别有用。
组织: 类组件可以更容易地组织你的代码，因为你可以将相关的方法组合在同一个组件中。这可以更容易地查找和维护代码。

您可能想要选择写作的原因还有几个 功能组件:

当你不需要使用状态或生命周期方法时：如果你不需要使用状态或生命周期方法，那么函数式组件是一个不错的选择，因为它比类组件更简单，更易于读写。
当你需要一个纯组件时：功能组件是“纯”组件，这意味着它们只依赖于它们的 props 而没有自己的状态。如果你想确保组件仅在其 props 更改时才重新渲染，这可能很有用。
当你想优化性能时：因为功能组件是纯粹的，它们可以更容易地被 React 优化，这可能会带来更好的性能。
当您想编写简洁、易于阅读的代码时：由于功能组件更简单且移动部件更少，因此它们更易于阅读和理解，尤其是当您的应用程序中有很多组件时。

通常，除非您有只能通过类组件满足的特定需求，否则您应该使用功能组件。

使用效果和使用状态

但是，请务必注意，您也可以在功能组件中使用状态和生命周期方法，使用 使用状态 和 使用效果 钩子。一般来说，您应该选择最适合您需求的组件类型，这将使您的代码最容易阅读和理解。

如果您仍想实现状态或生命周期事件，您将有可能使用挂钩来启用您的组件。

这就是你将如何实施 使用效果 和 使用状态 在你的功能组件中

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

在这里，我们有一个跟踪计数并向用户显示当前计数的组件。该组件使用 使用状态 钩子将状态添加到功能组件，以及 使用效果 钩子在计数更改时执行操作（更新文档标题）。