Javascript 在盖茨比中，扩展组件和箭头函数有什么区别

我试着用盖茨比和wordpress作为来源。这是一个有趣的过程，但我是新的反应和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

从“盖茨比”导入{Link}
从“React”导入React，{Component}
类StaticMenu扩展组件{
render（）{
返回(

家
博客
页数

)
}
}
导出默认静态菜单

及

从“React”导入React
从“盖茨比”导入{Link}
常量WPMenu=（）=>(

家
博客
页数

);
导出默认WPMenu

---

或者更好……我应该使用哪种语法？

这两种语法都是创建组件的有效语法。在引入了

以前，功能组件被用作无状态的表示组件，功能组件在父级的每个渲染上渲染，而不管组件道具是否更改（在挂钩、备忘录之前），基于类的组件被用作有状态组件（也称为容器）（请不要为容器而争吵）

但是现在我们有了像

memo

这样的api，它允许我们使用功能组件，除非道具被更改，否则不会在每次父级渲染时重新渲染，因此它提供了以前道具和当前道具的粗略比较。您还可以传递第二个参数来添加自定义逻辑，以确定您希望组件何时重新渲染

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

---

一个是类，一个是箭头函数。在第一个示例中，您在类内使用状态，在第二个示例中，您使用挂钩作为状态。我更喜欢函数，但你可以使用任何你想要的。查看以下资源：，@wlh你的第一个资源是预钩子版本，因此它可能会误导OP。“我应该使用哪一个？”主要是基于观点的，因此离题。至于差异，已经有好几次了。@Mirakurun可能认为这篇文章包含了钩子的更新。

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

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
}