当前位置: 首页 > 面试题库 >

反应功能性无状态组件,PureComponent,Component;有什么区别,什么时候应该使用什么?

华易安
2023-03-14
问题内容

React v15.3.0 知道,我们有了一个名为 PureComponent 的新基类,以扩展内置的
PureRenderMixin 。我了解的是,在幕后,它对内部的道具进行了浅浅的比较shouldComponentUpdate

现在,我们有3种方法来定义React组件:

  1. 功能性无状态组件,不扩展任何类
  2. 扩展PureComponent类的组件
  3. 扩展Component类的常规组件

一段时间以前,我们曾经将无状态组件称为“纯组件”,甚至称为“哑组件”。似乎“纯”一词的整个定义现在已经在React中改变了。

尽管我了解这三者之间的基本区别,但仍不确定 何时选择 。还有每种性能影响和权衡取舍是什么?

更新

这些是我希望得到澄清的问题:

  • 我应该选择将我的简单组件定义为功能性的(出于简单性考虑)还是扩展PureComponent类(出于性能的考虑)?
  • 我为失去的简单性而获得了真正的性能提升吗?
  • Component当我总是可以使用PureComponent以获得更好的性能时,是否需要扩展常规类?

问题答案:

您如何决定,如何根据我们组件的目的/尺寸/道具/行为在这三个之间进行选择?

从自定义方法扩展React.PureComponent或从React.Component自定义shouldComponentUpdate方法扩展具有性能影响。使用无状态功能组件是一种“架构”选择,并且没有任何现成的性能优势。

  • 对于需要易于重用的简单的仅表示组件,首选无状态功能组件。这样,您可以确定它们与实际的应用程序逻辑是分离的,它们非常容易测试,并且没有意外的副作用。例外是如果出于某种原因您有 很多 它们,或者确实需要优化它们的渲染方法(因为您无法shouldComponentUpdate为无状态功能组件定义)。

  • 扩展PureComponent如果你知道你的输出依赖于简单的道具/状态(“简单”意味着没有嵌套的数据结构,作为PureComponent执行浅比较)以及你需要/可以得到一些性能改进。

  • 如果您需要通过在下一个/当前道具与状态之间执行自定义比较逻辑来获得一些性能提升,则可以扩展Component并实施自己的游戏shouldComponentUpdate。例如,您可以使用lodash#isEqual快速执行深度比较:

    class MyComponent extends Component {
    shouldComponentUpdate (nextProps, nextState) {
        return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
    }
    

    }

此外,实施您自己的优化shouldComponentUpdate或从中PureComponent进行优化,通常应仅在遇到性能问题时才开始进行研究(避免过早的优化)。根据经验,我总是尝试在应用程序处于工作状态并且已经实现了大多数功能之后进行这些优化。当实际遇到问题时,专注于性能问题要容易得多。

更多细节

功能性无状态组件:

这些仅使用函数定义。由于无状态组件没有内部状态,因此输出(呈现的内容)仅取决于作为此函数的输入给出的props。

优点:

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

  • 理想情况下,在您的应用中,您应该致力于拥有尽可能多的无状态组件,因为这通常意味着您将逻辑移到了视图层之外,然后将其移至了redux之类,这意味着您可以测试真实的逻辑而无需渲染任何内容(更容易测试,更可重用等)。

缺点:

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

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

  • 不支持引用:https : //github.com/facebook/react/issues/4936

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

以前,React
PureRenderMixin可以将您附加到使用React.createClass语法定义的类。mixin只需定义shouldComponentUpdate下一个道具和下一个状态之间的浅表比较,以检查是否有任何变化。如果没有任何变化,则无需执行重新渲染。

如果要使用ES6语法,则不能使用mixins。为了方便起见,React引入了一个PureComponent您可以继承而不使用的类ComponentPureComponent只是shouldComponentUpdate以与相同的方式实现PureRendererMixin。这主要是方便的事情,因此您不必自己实现,因为当前/下一个状态与道具之间的浅层比较可能是最常见的情况,可以使您快速获得性能。

例:

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

如您所见,输出取决于props.imageUrlprops.username。如果在父组件中<UserAvatar username="fabio" imageUrl="http://foo.com/fabio.jpg" />使用相同的道具进行渲染,则render即使输出完全相同,React也会每次调用。请记住,尽管React实现了dom
diff,所以DOM实际上不会被更新。尽管如此,执行dom diff仍然很昂贵,因此在这种情况下将是浪费。

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

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

通常,“纯函数”是在给定相同输入的情况下始终对相同结果求值的函数。输出(对于React,这就是方法返回的结果render)不依赖于任何历史记录/状态,也没有任何副作用(在函数外部更改“世界”的操作)。

在React中,如果您将“无状态”组件称为永不调用this.setState且不使用的组件,那么根据上述定义,无状态组件不一定是纯组件this.state

实际上,在中PureComponent,您仍然可以在生命周期方法中执行副作用。例如,您可以在内部发送ajax请求componentDidMount,也可以执行DOM计算以动态调整内div的高度render

“哑巴组件”的定义具有更“实用”的含义(至少在我的理解中):一个哑巴组件通过道具“被告知”父组件要做什么,并且不知道该怎么做,而是使用道具回调。

“智能”示例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>
    }
}

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



 类似资料:
  • 了解到,从React v15.3.0中,我们有一个名为PureComponent的新基类,可以使用PureRenderMixin内置进行扩展。我所理解的是,在引擎盖下,它采用了内部道具的浅层比较。 现在我们有3种方法来定义React组件: 不扩展任何类的函数无状态组件 扩展类的组件 扩展类的普通组件 一段时间以前,我们将无状态组件称为纯组件,甚至是哑组件。似乎“纯粹”这个词的整个定义现在在《反应》

  • 问题内容: 我知道他们两个都禁用了Nagle的算法。 我什么时候应该/不应该使用它们中的每一个? 问题答案: 首先,不是所有人都禁用Nagle的算法。 Nagle的算法用于减少有线中更多的小型网络数据包。该算法是:如果数据小于限制(通常是MSS),请等待直到收到先前发送的数据包的ACK,同时累积用户的数据。然后发送累积的数据。 这将对telnet等应用程序有所帮​​助。但是,在发送流数据时,等待A

  • 问题内容: 在该类中,有两个字符串,和。 有什么不同?我什么时候应该使用另一个? 问题答案: 如果你的意思是和则: 用于在文件路径列表中分隔各个文件路径。考虑在上的环境变量。您使用a分隔文件路径,因此在上将是;。 是或用于拆分到特定文件的路径。例如在上,或

  • 问题内容: 在我的情况下: 要么 没关系,有什么区别? 问题答案: 使用自定义类型: 使用了内置的简单类型: 使用复杂的内建类型: 最后一个有点棘手:

  • 问题内容: 在集成我以前从未使用过的Django应用程序时,我发现了用于定义类中函数的两种不同方式。作者似乎非常有意地使用了它们。第一个是我自己经常使用的: 另一个是我不使用的,主要是因为我不知道何时使用它,以及什么用途: 在Python文档中,装饰器的解释如下: 类方法将类作为隐式第一个参数接收,就像实例方法接收实例一样。 所以我想指的是自己(而不是实例)。我不完全理解为什么会这样,因为我总是可

  • 问题内容: 我看过各种文章,但我仍然不知道为什么不应该使用它。请让我知道您的想法。 问题答案: 我发现有必要在错误的设计中使用instanceof提示。可以肯定的是,将会出现一个大型,复杂的开关风格的构造。在我看到的其他大多数情况下,我们应该使用多态而不是instanceof。请参阅策略模式。(相关的使用示例) 我唯一需要使用的是实现时。