时间戳

首页 > 解决方案 > const Page 和 class Page 的使用区别用 GatsbyJS/ReactJS 扩展 React.Component

reactjs - const Page 和 class Page 的使用区别用 GatsbyJS/ReactJS 扩展 React.Component

问题描述

我最近开始使用 Gatsby，在理解一些概念（实际上可能来自 React）时遇到了一些麻烦。

例如：我正在使用一个名为gatsby-plugin-intl的 I18n 插件，我正在努力理解如何将文档中的代码放入我的代码中。

我从入门包中获得的代码包含一个文件，其代码如下src/pages/index.js：

import React from "react";

class RootIndex extends React.Component {
  render() {
    return (
...

但很多时候，我会遇到这样开头的代码示例：

import React from "react"

const RootIndex = () => {
  return (
...

显然，这两种方法产生相同的输出。但是当我遇到一个教程告诉我实现这样的代码时：

import React from "react"
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const RootIndex = ({ intl }) => {
  return (
    <Layout>
      <SEO
        title={intl.formatMessage({ id: "title" })}
      />
...

我不知道intl使用定义类的第一种方法将参数放在哪里。这不起作用

import React from "react";
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

class RootIndex extends React.Component {
  render({ intl }) {
    return (
      <Layout>
        <SEO
          title={intl.formatMessage({ id: "title" })}
        />
...

我希望我的描述和问题是清楚的。我在这里缺少更简洁的知识。哪条路是正确的？

标签： reactjsgatsby

解决方案

它们在输出方面完全相同，但在性能和它们是什么方面却不同。它们被称为有状态（基于类的组件）和无状态组件（功能组件）。

一般来说，如果你只想渲染一个组件，我会推荐一个函数式组件，因为它具有更好的性能，并且使代码更清晰，更可重用，让你可以更好地原子化功能。

另一方面，如果您正在使用某种编程模式（BLoC、MVVM等），您可能需要创建类来保存业务逻辑，这样您就可以相互扩展。

基于类的组件（有状态）

  • 基于类的组件利用 ES6 类并在 React 中扩展了 Component 类。

  • 有时称为“智能”或“有状态”组件，因为它们倾向于实现逻辑和状态。

  • React 生命周期方法可以在类组件（componentDidUpdate,componentDidMount等）中使用。

  • 您将道具传递给类组件并使用this.props（this关键字）访问它们。

  • 您需要绑定/取消绑定事件和函数。

功能组件（无状态）

  • 函数式组件是基本的 JavaScript 函数。这些通常是箭头函数，但也可以使用常规function关键字创建。

  • 与基于类的组件相反，这些组件有时被称为“哑”或“无状态”组件，因为它们只是接受数据并以某种形式显示它们；也就是他们主要负责渲染 UI。

  • React 生命周期方法（例如，componentDidMount）不能在功能组件中使用。但是，它们允许您使用 React Hooks ( useState,useEffect等) 来处理所有典型的生命周期好处，添加更清洁、可重用的代码。

  • 功能组件中没有使用render方法，函数的返回会处理它。因此，他们主要负责UI。

  • 功能组件可以接受和使用道具。

  • 它们的性能略好于基于类的性能。但在我看来，最重要的是它们更干净，更可重用。

参考：

关于您的实现，由于gatsby-plugin-intl使用内部挂钩 ( useIntl)，因此以下代码应该可以工作：

import React from "react"
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const RootIndex = (props) => { 
 const intl = useIntl();
  return (
    <Layout>
      <SEO
        title={intl.formatMessage({ id: "title" })}
      />
...

您缺少const intl = useIntl();允许您的代码使用gatsby-plugin-intl国际化的方法。props一旦你导入它，你需要在return语句上方实例化它，而不是通过它传递它。

推荐阅读