javascript - React 函数式组件真的比类组件更轻量级吗？

Question

我读过 a few places功能组件比类组件更轻量级，并且来自 here听起来 Facebook 打算让功能 + Hook 成为新组件的首选范例。

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

为清楚起见，示例:

类组件

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>
  );
}

Answer 1

Slowest Web 应用程序中的一部分是 rendering .所以在每次渲染上创建一个新函数并不是什么大问题。也适用于网络应用程序，build size重要的是，对于功能组件，缩小比对基于类的组件更有效。

随着 memo 等新功能的发布, useMemo , useCallback等等，我们可以获得与使用基于类的组件相同的性能。

React 社区正在向功能组件和钩子(Hook)发展，这表明功能组件还不错。