Javascript React功能组件真的比类组件更轻吗？

我在书中读到，功能组件比类组件更轻量级，从这一点来看，Facebook似乎打算让functional+挂钩成为新组件的首选范例

我看到的问题是，对于函数组件，类方法之类的东西在每次渲染时都会被重新定义，而不是一次。这不是一个问题，还是功能组件的其他优势超过了这一点

---

为清晰起见，示例：

类组件

类符号信息扩展了React.Component{
...
//仅在使用“React.createElement”创建组件时定义`
提交=（）=>{
//发送POST请求以获取身份验证令牌等。
}
render（）{
...
登录
}
}

功能部件

功能符号信息（道具）{
...
//在每个渲染上定义，因为它本质上*是*render`函数
常量提交=（）=>{
//发送POST请求以获取身份验证令牌等。
}
返回(
...
登录
);
}

web应用程序中最慢的部分是
渲染。因此，在每个渲染上创建一个新函数并不是什么大事。同样对于web应用程序，
构建大小
也很重要，对于功能组件，缩小比基于类的组件更有效

随着诸如
memo
、
usemo
、
useCallback
等新功能的发布，我们可以获得与基于类的组件相同的性能

React社区正朝着功能组件和挂钩的方向发展，这表明功能组件并不坏。
@PatrickRoberts方法在类的主体中定义（在这种情况下通常是生命周期或回调方法）。@PatrickRoberts我编辑了这个问题以澄清我的意思。对于功能性（无状态）组件，如果未更改参数，则无需调用渲染函数。类需要维护状态，因此相同的输入不能保证相同的输出，因此必须更频繁地调用呈现函数
class SignInForm extends React.Component {
  ...
  // Only gets defined when the component is created with `React.createElement`
 submit = () => {
    // send POST request to get an auth token, etc.
  }

  render() {
    <form>
      ...
      <button onClick={this.submit}>Sign In</button>
    </form>
  }
}

function SignInForm (props) {
  ...
  // Gets defined on every render, since this essentially *is* the `render` function
  const submit = () => {
    // send POST request to get an auth token, etc.
  }

  return (
    <form>
      ...
      <button onClick={submit}>Sign In</button>
    </form>
  );
}