React 函数式无状态组件，PureComponent，Component；有什么区别，我们什么时候应该使用什么？

您如何决定，如何根据我们组件的用途/大小/道具/行为在这三者之间进行选择？

使用自定义 shouldComponentUpdate 方法从 React.PureComponent 或 React.Component 扩展会影响性能。使用无状态功能组件是一种“架构”选择，并且没有任何开箱即用的性能优势（目前）。

对于需要轻松重用的简单、仅展示的组件，更喜欢无状态的功能组件。通过这种方式，您可以确定它们与实际的应用程序逻辑分离，它们非常容易测试并且它们没有意外的副作用。例外情况是，如果由于某种原因你有很多，或者你真的需要优化它们的渲染方法（因为你不能为无状态的功能组件定义 shouldComponentUpdate）。

如果您知道您的输出依赖于简单的 props/state（“简单”意味着没有嵌套数据结构，因为 PureComponent 执行浅比较）并且您需要/可以获得一些性能改进，请扩展 PureComponent。

如果您需要通过在下一个/当前道具和状态之间执行自定义比较逻辑来获得一些性能提升，请扩展 Component 并实现您自己的 shouldComponentUpdate 。例如，您可以使用 lodash#isEqual 快速执行深度比较： class MyComponent extends Component { shouldComponentUpdate (nextProps, nextState) { return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState); } }

此外，实现您自己的 shouldComponentUpdate 或从 PureComponent 扩展都是优化，并且像往常一样，只有在遇到性能问题 (avoid premature optimizations) 时才应该开始研究它。根据经验，我总是在应用程序处于工作状态后尝试进行这些优化，并且大多数功能已经实现。当性能问题真正阻碍时，专注于性能问题要容易得多。

更多细节

功能性无状态组件：

这些只是使用函数定义的。由于无状态组件没有内部状态，因此输出（渲染的内容）仅取决于作为该函数输入的道具。

优点：

在 React 中定义组件的最简单方法。如果您不需要管理任何状态，为什么还要为类和继承而烦恼呢？函数和类之间的主要区别之一是，通过函数，您可以确定输出仅取决于输入（而不取决于先前执行的任何历史记录）。

理想情况下，在您的应用程序中，您的目标应该是拥有尽可能多的无状态组件，因为这通常意味着您将逻辑移到视图层之外并将其移至 redux 之类的东西，这意味着您可以测试您的真实逻辑而无需渲染任何东西（更容易测试，更可重用等）。

缺点：

没有生命周期方法。您没有办法定义 componentDidMount 和其他朋友。通常，您在层次结构中较高的父组件中执行此操作，因此您可以将所有子组件变成无状态的子组件。

无法手动控制何时需要重新渲染，因为您无法定义 shouldComponentUpdate。每次组件接收到新的道具时都会发生重新渲染（无法进行浅比较等）。未来，React 可以自动优化无状态组件，现在有一些库可以使用。由于无状态组件只是函数，基本上是“函数记忆”的经典问题。

不支持参考：https://github.com/facebook/react/issues/4936

扩展 PureComponent 类的组件 VS 扩展 Component 类的普通组件：

React 曾经有一个 PureRenderMixin，您可以将其附加到使用 React.createClass 语法定义的类。 mixin 将简单地定义一个 shouldComponentUpdate，在下一个 props 和下一个状态之间进行浅比较，以检查是否有任何变化。如果没有任何变化，则无需执行重新渲染。

如果要使用 ES6 语法，则不能使用 mixins。因此，为方便起见，React 引入了一个 PureComponent 类，您可以从其继承而不是使用 Component。 PureComponent 只是以与 PureRendererMixin 相同的方式实现 shouldComponentUpdate。这主要是一件方便的事情，因此您不必自己实现它，因为当前/下一个状态和 props 之间的浅比较可能是最常见的场景，可以让您快速获得一些性能提升。

例子：

class UserAvatar extends Component {
    render() {
       return <div><img src={this.props.imageUrl} /> {{ this.props.username }} </div>
    }
} 

如您所见，输出取决于 props.imageUrl 和 props.username。如果在父组件中使用相同的 props 渲染 <UserAvatar username="fabio" imageUrl="http://foo.com/fabio.jpg" />，React 每次都会调用 render，即使输出完全相同。请记住，尽管 React 实现了 dom diff，因此 DOM 不会实际更新。尽管如此，执行 dom 差异可能会很昂贵，因此在这种情况下，这将是一种浪费。

如果 UserAvatar 组件扩展了 PureComponent，则执行浅比较。而且因为 props 和 nextProps 是一样的，所以 render 根本不会被调用。

关于 React 中“纯”定义的注释：

通常，“纯函数”是在给定相同输入的情况下始终计算相同结果的函数。输出（对于 React，即 render 方法返回的内容）不依赖于任何历史/状态，也没有任何副作用（改变函数外部“世界”的操作）。

在 React 中，如果你将一个从不调用 this.setState 并且不使用 this.state 的组件称为“无状态”，那么根据上面的定义，无状态组件不一定是纯组件。

事实上，在 PureComponent 中，您仍然可以在生命周期方法期间执行副作用。例如，您可以在 componentDidMount 内发送一个 ajax 请求，或者您可以执行一些 DOM 计算来动态调整 render 内的 div 的高度。

“哑组件”定义具有更“实用”的含义（至少在我的理解中）：哑组件通过道具“被告知”父组件要做什么，并且不知道如何做事但使用道具而是回调。

“智能”AvatarComponent 示例：

class AvatarComponent extends Component {
    expandAvatar () {
        this.setState({ loading: true });
        sendAjaxRequest(...).then(() => {
            this.setState({ loading: false });
        });
    }        

    render () {
        <div onClick={this.expandAvatar}>
            <img src={this.props.username} />
        </div>
    }
}

“哑”AvatarComponent 示例：

class AvatarComponent extends Component {
    render () {
        <div onClick={this.props.onExpandAvatar}>
            {this.props.loading && <div className="spinner" />}
            <img src={this.props.username} />
        </div>
    }
}

最后，我会说“哑”、“无状态”和“纯”是完全不同的概念，有时可能会重叠，但不一定，主要取决于您的用例。

---

我不是反应天才，但据我了解，我们可以在以下情况下使用每个组件

无状态组件——这些是没有生命周期的组件，因此这些组件应用于渲染父组件的重复元素，例如渲染仅显示信息且没有任何操作可执行的文本列表。纯组件——这些是具有生命周期的项目，当给定一组特定的道具时，它们总是会返回相同的结果。当显示结果列表或没有复杂子元素的特定对象数据并用于执行仅影响自身的操作时，可以使用这些组件。这样的显示用户卡列表或产品卡列表（基本产品信息），用户只能执行的操作是单击查看详细信息页面或添加到购物车。普通组件或复杂组件——我使用术语复杂组件，因为它们通常是页面级组件，包含许多子组件，而且每个子组件都可以以自己独特的方式运行，所以你不能 100% 确定它会在给定状态下呈现相同的结果。正如我所说，通常这些应该用作容器组件

---

React.Component 是默认的“普通”组件。您使用 class 关键字声明它们并扩展 React.Component。将它们视为一个类，具有生命周期方法、事件处理程序和任何方法。

React.PureComponent 是一个 React.Component，它使用一个函数来实现 shouldComponentUpdate()，该函数对其 props 和 state 进行浅层比较。如果您知道组件具有更改的道具或状态嵌套数据并且您想要重新渲染，则必须使用 forceUpdate()。因此，如果您需要在您作为道具传递或在状态中设置的数组或对象发生更改时重新渲染组件，那么它们就不是很好了。

功能组件是没有生命周期功能的组件。它们应该是无状态的，但它们非常干净整洁，以至于我们现在有了钩子（从 React 16.8 开始），所以你仍然可以拥有状态。所以我猜它们只是“干净的组件”。

---