在盖茨比中，扩展组件与箭头功能有啥区别[重复]

Posted 2023-02-19

【中文标题】在盖茨比中，扩展组件与箭头功能有啥区别[重复]

【英文标题】：In Gatsby what is the difference in exteding component vs arrow function [duplicate]在盖茨比中，扩展组件与箭头功能有什么区别[重复]

【发布时间】：2020-05-26 03:10:24

【问题描述】：

我正在尝试使用 gatsby 和 wordpress 作为来源。这是一个有趣的过程，但我对 React 和 JS 很陌生。

谁能告诉我这两种方法的区别？

import  Link  from "gatsby"
import React,  Component  from "react"

class StaticMenu extends Component 
  render() 

    return (
      <nav>
        <ul>
          <li><Link to="/">home</Link></li>
          <li><Link to="/blog">blog</Link></li>
          <li><Link to="/page-list">pages</Link></li>
        </ul>
      </nav>
    )
  


export default StaticMenu

和

import React from 'react'
import  Link  from "gatsby"

const WPMenu =() => (
  <nav>
    <ul>
      <li><Link to="/">home</Link></li>
      <li><Link to="/blog">blog</Link></li>
      <li><Link to="/page-list">pages</Link></li>
    </ul>
  </nav>
);

export default WPMenu

或者更好...我应该使用哪个？

【问题讨论】：

嗯，一个是类，一个是箭头函数。在第一个中，您在类中使用状态，在第二个中，您使用钩子作为状态。我更喜欢函数，但你可以使用任何你想要的。

查看这些资源：medium.com/@Zwenza/…，overreacted.io/…

@wlh 你的第一个资源是 pre-hooks 版本，所以它可能会误导 OP。

“我应该使用哪个？”主要是基于意见的，因此偏离主题。至于区别，已经是asked and answered多次了。

@Mirakurun 也许，我认为这篇文章包含了钩子的更新。

【参考方案1】：

两者都是创建组件的有效语法。 Hooks Api

引入后，社区正在向功能组件（包括箭头功能）发展

以前，功能组件仅用作没有状态的表示组件，并且无论组件道具是否更改（在钩子，备忘录之前），功能组件都会在父级的每个渲染上呈现，并且基于类的组件被用作有状态组件，即容器（请不要为容器争吵）。

但是现在我们有了像 memo 这样的 api，它允许我们使用不会在每次渲染父级时重新渲染的功能组件，除非 props 发生变化，因此它提供了以前 props 和当前 props 的浅层比较。您还可以传递第二个参数来添加您的自定义逻辑，以确定您希望何时重新渲染您的组件。

let Person = (props) => <div>props.name</div>;
Person = memo(Peron, someComparisonCallBackOrNothing);

在引入useState, useEffect, use*这样的React Hooks之后，我们就可以将函数式组件作为有状态的组件了

const Person = props => 
   const [loading, setLoading] = useState(false);
   const [person, setPerson] = useState();
   const getPerson = async (id) => 
       const data = await axios.get(`/persons/$id`);
       setPerson(data);
   
   useEffect(() => 
      // Get user data from some api
      getPerson();
   , [props.id]);  /// will be triggered on componentDidMount or if props.id changes