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

Question

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

我的问题是，什么时候应该使用哪个？为什么？一个人相对于另一个人的利益/取舍是什么？

ES6课程：

import React, { Component } from 'react';

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

功能性：

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

我认为只要没有状态可以由该组件操纵，功能就可以了，是吗？

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

Answer 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

关于何时在功能组件上使用类的建议，Facebook正式建议尽可能使用功能组件。顺便说一句，我听到很多人讨论出于性能原因不使用功能组件，特别是

“事件处理功能在功能组件中按渲染重新定义”

虽然正确，但请考虑您的组件是否真的以值得关注的速度或体积进行渲染。

如果是这样，则可以防止使用useCallback和useMemo挂钩重新定义功能。但是，请记住，这可能会使您的代码（微观上）的性能变差。

但老实说，我从未听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源-遇到问题时请担心