javascript - 挂载/更新组件生命周期中的引用

Question

我有一个双向滚动的无限滚动列表。该列表显示每行 5 个项目的网格，表示一周 7 天中的 5 个工作日。日子是按月剥离的斑马线(甚至月份的颜色略深)。我想将月份标题放在网格左侧的一列中，从该月的第一天或该月可用的最早一天开始(考虑到数据中的 AJAX——并不总是从第一个工作日开始月)。

我有所有必要的逻辑来确定哪一天是第一天(因为我只显示工作日，如果第一天是周末，那么月初可能不是第一天)。

到目前为止，我有以下内容:

1. 渲染网格时，使用 YYYYMM_start 或 YYYYMM_end 格式的 ref 标记月初和月末>.

2. 然后，我使用与 YYYYMM 格式相同的 monthStamp Prop 渲染 MonthTitle 组件，以及findMonthNode 属性，它接收一个函数来查找父组件上的开始和结束节点(使用正则表达式)。

3. 在 MonthTitle 组件中，在 componentDidMount 中，我可以相对于该月的起始节点绝对定位标题。我还在 componentDidUpdate 中调用了完全相同的函数。

我的问题是当我及时滚动列表(记住，在两个方向上无限滚动)时:我的 AJAX 触发并加载带有新月份标题的新图 block ，并且新月份标题正确呈现，但第一个的原始标题不会相应更新。经过一番摸索，我意识到 componentDidUpdate 中父组件中的 this.refs 不等于 this.refs 在componentDidMount 的父组件中。 componentDidMount 似乎有完整的列表，而 componentDidUpdate 只有在安装新节点(来自 AJAX 响应)之前存在的节点列表。

由于 componentDidUpdate 没有所有新的引用，我无法相应地定位之前的第一个月标题，并且它仍然停留在最初在 componentDidMount 中呈现的位置，这--给定新数据--现在是不正确的位置。

---

为什么 this.refs 这两个函数(componentDidMount & componentDidUpdate)不同？我可以做些什么来确保在安装和更新组件时我可以访问完整的 this.refs？

使用 react 0.13.3 仅供引用

Answer 1

如果您查看组件生命周期规范 here ，您会看到 componentDidUpdate 会在您的组件每次更新时运行(通过组件或其祖先之一中的 this.setState)，但不会在初始更新之后运行渲染:

componentDidUpdate(object prevProps, object prevState)

Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

另一方面，

componentDidMount 在初始渲染后运行，但不会在通过 setState 更新后运行:

componentDidMount()

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.

因此，如果您更新状态(通过组件中的 this.setState)并重新渲染您的组件，可能会添加具有 ref 属性的新子元素，那些在父级的 componentDidMount 中不可见，但在 componentDidUpdate 中可见。

另一方面，如果您更新父组件并且更新呈现新的子组件，那么这些子组件的 componentDidMount 确实会在父组件的 componentDidUpdate 之前触发，因为在所有新的子组件都已正确安装和呈现之前，父组件不会完成更新。它会像这样:

1. 任何初始子项的 componentDidMount 执行(可能有点令人惊讶，但父项直到其所有子项都已安装后才完成安装，这是有道理的)
2. 父级的componentDidMount执行
3. 父级通过 setState 更新，其中一些已添加的子级和一些已在上次渲染中存在的子级
4. 所有新添加的子项的 componentDidMount 执行和所有先前存在的子项的 componentDidUpdate 执行
5. 父级的componentDidUpdate执行

Here's a JSFiddle证明这一点。