React中的函数式组件和类组件详解

前端  /  管理员 发布于 2年前   646

功能组件和类组件：

功能组件和类组件都用于创建 React 组件。他们每个人都有自己的优点和缺点。

功能组件通常用于不需要状态或生命周期方法的简单 UI 组件。它们易于编写和测试，并且可以记住以提高性能。

类组件通常用于需要状态或生命周期方法的更复杂的 UI 组件。它们更难编写和测试，但性能更高。

Reacts中主要有两个组件：

功能组件或无状态组件

类组件或有状态组件

简单来说，功能组件就是函数，而类组件就是类。功能组件和类组件之间的主要区别在于，功能组件没有状态，而类组件有状态。

基本规则是我们在 React 中编写组件名称时首字母大写。

此规则适用于功能组件和类组件。

ps:

React中的有状态和无状态组件浅析

https://www.zongscan.com/demo333/95994.html

功能组件

没有使用任何render()方法。

这是可读的代码。这很容易理解。

只需接受数据并以某种形式显示。

基于简单函数的组件语法

function App() {
  return <div>It is Functional Component</div>;
}
export default App;

将props 传递给功能组件

import React from "react";
 
const PropsExample = (props) => {
  return (
    <div>
      <p>Passing Props in Functional Component</p>
      <h4>Taking Props: {props.value}</h4>
    </div>
  );
};
 
function App() {
  return <PropsExample value={"Passing the value"} />;
}
export default App;

类组件

它必须有一个方法。如果它没有方法，则它不是类组件 render()render()

类组件可以使用 React 生命周期方法。

生命周期方法是：

componentDidMount, componentsDidUpdate,componentWillUnmount.

您将道具传递给类组件并使用this.props

它必须有一个构造方法。

我们可以在app.js 文件中编写代码。

app.js 文件是包含运行 React 应用程序所需的所有 JavaScript 代码的主文件。

让我们快速看一下以下代码：

简单的基于类的组件语法：

import React from "react";
 
class App extends React.Component {
  render() {
    return <div>It is Class Component</div>;
  }
}
 
export default App;

将 props 传递给类组件

import React from "react";
 
class PropsExample extends React.Component {
  render() {
    return (
      <div>
        <p>Passing Props in Class Component</p>
        <h4>Taking Props: {this.props.value}</h4>
      </div>
    );
  }
}
 
class App extends React.Component {
  render() {
    return <PropsExample value={"Passing the value"} />;
  }
}
 
export default App;

总结

我们可以使用箭头函数和常规函数关键字创建功能组件。

无论您喜欢什么，它都可以正常工作，您可以使用它。

功能组件是简单易读的代码。

我推荐使用箭头函数，因为它们可以让你编写更少的代码。