为什么不是所有的 React 组件都默认用 React.memo() 包装?



我刚刚了解了React.memo(),想知道我们什么时候不希望这种行为?难道我们不总是希望组件只有在道具被更改的情况下才能重新渲染吗?

这是因为记忆本身不是免费的,不应该到处使用它。因为:

  • Memoization本身在比较一个渲染和下一个渲染的值时会产生性能成本。在某些情况下,这实际上可能大于渲染的成本
  • 你不可能写一个通用的比较函数,在每一种情况下都能工作。反应备忘录的第二个论点很重要。开发人员在那里定义了组件应该重新提交的道具的具体更改。在两个方面,这通常比简单的1:1道具更改更复杂。首先,要比较的值可能不是很容易比较的东西(比如字符串或int(,而是复杂的对象或对函数的引用等。其次,你可能只希望在某个组合的道具更改发生时重新发布。因此,通过在任何地方启用它,您将要求开发人员为系统中的每个组件考虑这一点,这将是一项非常大且容易出错的任务。这也可能对大多数组件的收益很小。只有当你有问题要解决时,你才应该做这一切
  • 当你遇到性能问题时,记忆化很有用,但在你完成之前,使用它是个坏主意,因为它还会大大增加应用程序中bug的表面积。如果你不正确地比较了一个道具,或者在useMemo的情况下,忘记向deps数组添加一些东西——你的应用程序现在有一个错误。由于这是开发人员管理的事情——会发生人为错误。当一个毫无戒备的开发人员扩展了存储组件的API,然后不更新比较函数时,这种情况通常会发生很多。如果记忆函数的编写方式使得它可以在没有更改的情况下接受和比较新的道具,那么也可能发生完全相反的情况,但这种比较(就像如果它比较一个对象,每次都会是一个diff引用(实际上每次都会触发一个重新提交,这使得整个事情毫无意义(虚假的安全感(

简而言之:记忆是一种维护负担,你只应该在个人和特定情况下进行成本效益分析。

最新更新