Question

我在a few places中读到，功能组件比类组件更轻巧，从here看来，Facebook打算将功能+钩子作为新组件的首选范例。

我看到的问题是，在使用功能组件时，类方法之类的东西会在每个渲染器上重新定义，而不仅仅是一次。这不是问题吗，或者功能组件的其他优点是否超过了这个范围？

为清楚起见，示例：

类组件

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部分是rendering。因此，在每个渲染器上创建新功能并不重要。同样对于Web应用程序而言，build size很重要，对于功能组件而言，缩小效果要优于基于类的组件。

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

反应社区正在朝着功能组件和挂钩的方向发展，这表明功能组件还不错。

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

1 个答案: