何时使用基于 ES6 类的 React 组件与功能性 ES6 React 组件？

javascript ecmascript-6 reactjs redux

2022-08-29 23:42:54

在花了一些时间学习 React 之后，我了解了创建组件的两种主要范式之间的区别。

我的问题是我什么时候应该使用哪一个，为什么？一个相对于另一个的好处/权衡是什么？

ES6 类：

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

功能的：

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

每当没有状态被该组件操纵时，我就在思考功能，但事实果真如此吗？

我猜如果我使用任何生命周期方法，最好使用基于类的组件。

答案 1

新答案：在 React Hooks 推出之前，以下大部分内容都是正确的。

componentDidUpdate可以使用复制，其中是重新呈现时要运行的函数。useEffect(fn)fn
componentDidMount方法可以使用复制，其中是重新呈现时要运行的函数，并且是组件将为其重新呈现的对象数组，当且仅当至少有一个对象自上次呈现以来更改了值。由于没有，因此在第一次装载时运行一次。useEffect(fn, [])fn[]useEffect()
state可以使用复制，其返回值可以反结构化为状态的引用和可以设置状态的函数（即）。一个例子可以更清楚地解释这一点：useState()const [state, setState] = useState(initState)

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

顺便说一句，我听到很多人讨论出于性能原因不使用功能组件，特别是

“在功能组件中为每个渲染重新定义事件处理函数”

虽然这是真的，但请考虑您的组件是否真的以如此快的速度或体积渲染，这将值得关注。

如果是，则可以阻止使用和 hooks 重定义函数。但是，请记住，这可能会使您的代码（在微观上）性能下降。useCallbackuseMemo

但老实说，我从未听说过重新定义函数是 React 应用程序中的瓶颈。过早的优化是万恶之源 - 当出现问题时，请担心这一点。

旧答案：你有正确的想法。如果你的组件除了吸收一些道具和渲染之外没有做更多的事情，那就去功能化了。您可以将这些视为纯函数，因为它们在给定相同道具的情况下始终呈现和行为相同。此外，他们不关心生命周期方法或拥有自己的内部状态。

因为它们是轻量级的，所以将这些简单的组件编写为功能组件是非常标准的。

如果您的组件需要更多功能（如保持状态），请改用类。

答案 2

2019年3月更新

基于我最初答案中所说的内容：

React 函数和类之间有什么根本的区别吗？当然，在心智模型中是有的。

https://overreacted.io/how-are-function-components-different-from-classes/

2019年2月更新：

随着 React 钩子的引入，React 团队似乎希望我们尽可能地使用功能组件（这更好地遵循 JavaScript 的功能性质）。

他们的动机：

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

带有钩子的功能组件几乎可以完成类组件可以执行的所有操作，而不会出现上述任何缺点。

我建议您尽快使用它们。

原始答案

功能组件并不比基于类的组件更轻量级，“它们完全像类一样执行 https://github.com/facebook/react/issues/5677#issuecomment-241190513。

上面的链接有点过时了，但是 React 16.7.0 的文档说函数式和类组件：

从 React 的角度来看是等效的

https://reactjs.org/docs/components-and-props.html#stateless-functions

除了语法之外，功能组件和仅实现呈现方法的类组件之间基本上没有区别。

将来（引用上面的链接）：

我们[React]可能会添加这样的优化

如果您尝试通过消除不必要的渲染来提高性能，这两种方法都可以提供支持。用于功能组件和类。memoPureComponent

-https://reactjs.org/docs/react-api.html#reactmemo

-https://reactjs.org/docs/react-api.html#reactpurecomponent

这真的取决于你。如果你想要更少的样板，那就去运行吧。如果你喜欢函数式编程，不喜欢类，那就去函数式。如果您希望代码库中的所有组件保持一致，请使用类。如果你厌倦了从函数式组件重构到基于类的组件，而你需要类似的东西，那就去类吧。state