是反应功能组件比类组件更轻巧

Question

我在几个地方读到，功能组件比类组件更轻巧，从这里听起来像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 Web应用程序中的一部分是rendering。因此，在每个渲染上创建一个新功能并不重要。同样对于Web应用程序，build size和功能组件，缩放效果要比在基于类的组件的工作时效果更好。

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

React社区正在朝着功能组件和钩子迈进，这表明功能组件还不错。