React组件是一个函数而不是一个类[重复]

Posted 2023-02-19

【中文标题】React组件是一个函数而不是一个类[重复]

【英文标题】：React component is a function not a class [duplicate]

【发布时间】：2019-12-03 08:26:20

【问题描述】：

所以我正在努力学习 ReactJs（我有 AngularJs 背景），我在学习教程时遇到了麻烦。

要创建项目，我们运行以下命令：

npx create-react-app app-name

然后在教程中App.js 是class。但是当我运行该命令时，我的命令是 function。

教程 App.js

class App extends Component 
render() 
return (
  <div className="App">
    <h1>Hello, world!</h1>
  </div>
);

我的 App.js

function App() 
return (
<div className="App">

</div>
);

我对这部分很困惑。

【问题讨论】：

两种方式都可以写组件

这可能只是他们在教程中使用的 react 版本。你的是最新的。但正如 John 所说，您可以用两种方式编写组件。

【参考方案1】：

有不同的写法：函数组件和类组件。 类组件支持 React 组件的整个生命周期，而函数组件实际上只是渲染函数。 您可以在此处了解不同之处：https://reactjs.org/docs/components-and-props.html#function-and-class-components

在 React 的最后一个版本中，出现了一个名为 Hooks 的新特性，它可以让你在函数组件中做你需要的一切： https://reactjs.org/docs/hooks-intro.html

希望这会有所帮助:)

【讨论】：

感谢您的回答，看起来反应方向是hooks

【参考方案2】：

React 组件可以是类，也可以是函数。它适用于两者。使用类组件的优势在于它为您的组件提供了更多功能，例如状态、生命周期方法。这些组件通常很复杂。另一方面，功能组件非常简单易学。 您还可以使用以下方法将功能组件转换为类组件： https://reactjs.org/docs/state-and-lifecycle.html

希望这会有所帮助！