React 组件和 Props

介绍

React 中的组件是应用程序的构建块。它们是可重用的代码块，可用于构建 UI 的各个部分，而无需将所有内容放在一个文件中。此外，组件还可以包含其他方面，例如状态、属性等。

React 中有两种类型的组件：

类组件
功能组件

现在让我们逐一看一下。

类组件

顾名思义，类组件是扩展自 React 组件的 JavaScript 类。它有一个强制的render()方法，该方法返回一个 JSX 元素。React 早期主要基于类，因此我们需要类组件来管理状态。

它看起来是这样的：

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

随着 React Hooks 的引入，类组件实际上已经不再被使用了。如今，大多数专业人士都建议使用函数式组件。

功能组件

功能组件只是一个常规的 JavaScript 函数，它也返回一个 JSX 元素，但它不使用render()方法。

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}

上面的代码是一个返回 JSX 元素的函数式组件。正如你所见，函数式组件比类组件更易读。由于类组件可能更复杂，因此使用函数式组件也更容易。随着 React hooks 的引入，现在可以在函数式组件中声明“状态”。

React 中的 Props

组件的一个重要概念是它们如何通信。React 有一个特殊的对象叫做 props，意思是属性。它用于将数据从父组件传递到子组件。Props 仅以单向流的方式传输数据，即从父组件到子组件。

让我们看看类组件中 props 的使用，我们来看一个非常简单的例子：

import React from "react";

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

在上面的代码中，我们创建了一个 Student 组件，它将返回以下 h1 标签以及传递给它的任何 name 属性。我们需要将该组件导入到父组件（即 App.js 文件）中，并将数据传递给它。

import React from "react";
import Student from "./Student"

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}

这将返回一个带有 name 属性的简单 h1 标签，该标签传递给组件，如下所示。

现在让我们看看如何在功能组件中使用 props。

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
}

如您所见，我们解构了我们想要从父组件传递的 props。

import React from "react";
import Student from "./Student";

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;

在App.js文件中传递我们想要的 props 之后，渲染结果将如下所示：

结论

我们已经了解了如何在组件之间传递 props，以及为什么函数式组件比类组件更受欢迎。props 可以用来传递数据，但不能用来操作数据。

感谢您的阅读！

文章来源：https://dev.to/killerkvothe117/react-components-and-props-32fc