在 getDefaultProps 中缓存道具是 React 中的反模式？

Posted 2023-03-15

【中文标题】在 getDefaultProps 中缓存道具是 React 中的反模式？

【英文标题】：Caching props in getDefaultProps an anti-pattern in React?

【发布时间】：2014-04-10 06:13:32

【问题描述】：

我正在编写一个复杂的反应应用程序并使用Cortex 作为我的中心模型。 cortex 的理念是它包装您的数据并在更改数据时从根调用完整的重新渲染。这非常有效，尤其是当您有非分层视图更改状态并影响其他视图时。

我面临的问题是在重新渲染时维护状态/道具。例如，我有一个这样的层次结构：

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

EditorCard 需要 Editor 的 javascript 实例，以便在单击 PublishButton 时更改 Editor（我在 Editor 中使用了一个外部库，它公开了编辑方法）。因此，ComponentDidMount 上的Editor 通过调用向下传递给它的函数将实例设置为EditorCard 上的prop。

我的问题是，当我单击 PublishButton 时，我更改了 cortex 对象的值，这会导致从根重新渲染，并且我松开了 Editor 的道具（因为组件已经安装 ComponentDidMount不会再次调用）。

我处理这个问题的方法是缓存getDefaultProps。

在EditorCard 内部，我的默认道具是：

  getDefaultProps: function() 
    return 
      cachedData: ,
    
  ,

并将编辑器实例保存为this.props.cachedData.editor = editorInstance

这样可以在多次重新渲染时保存道具。

这就是getDefaultProps 缓存的使用方式吗？在通过多次重新渲染保存道具时，我是否使用此 hack 打破了一些核心反应规则？如果可以，您能否提出一个更好的结构？

【参考方案1】：

不，getDefaultProps 的含义是：获取默认道具，以防所有者没有将这些道具传递给您。你可以说这是a = this.props.bla || 'hello';的简写。

话虽如此，如果我正确理解您的问题，我会看到三种解决方法。

改为将其缓存在您所在的州。 props 由父级传递，并且旨在从子级内部读取，至少在 vanilla React 中是这样。

与其将传递逻辑的道具放入您的componentDidMount，不如将​​其放入componentDidUpdate？

ref 可让您获取实例并直接调用其方法。

【讨论】：

感谢您的回复。我正在尝试找出正确的方法。对您的解决方案的评论： 1. 更改状态不会导致不必要的重新渲染吗？ （除非我在 shouldComponentUpdate 中添加了一些例外） 2. 是的，这听起来不错，但我再次担心我不会采用这种反应方式。 3.我使用的编辑器插件返回一个JS对象，不像react实例渲染ref没用。

1. React 的渲染很便宜。 2. 把它放在这里作为一个快速修复，因为我仍然不确定我是否 100% 理解了你的问题。 3、不能在Editor组件中附加方法吗？

我已经实现了getDefaultProps，但是当我尝试在render 函数中访问我的道具时，我定义的道具变成了undefined。为什么？！