javascript - 当整个 React dom 树加载完毕后采取行动

Question

当整个 React DOM 树加载完毕后，如何触发一个操作？就像知道 child 的 sibling 何时加载一样。我相信容器组件的 componentDidUpdate 仅应在完全渲染时触发(如其子组件已渲染)，但我发现情况并非如此。

例如:

class ParentContainer extends Component {

  componentDidUpdate() {
    // all of the children should be rendered by now?
    const { section } = this.props
    const scrollToEl = document.getElementById(section)
    if (scrollToEl) {
       scrollToEl.scrollIntoView({block: 'start', behavior: 'smooth'})
    }
  }

  render() {
    return (
      <div>
        <SiblingWithChildren1 />
        <SiblingWithChildren2 />
        <Child1>
          <Child2>
            array.map(comp => 
              <Section id={comp.id} />
            )
          </Child2>
        </Child1>
      </div>
    )
  }
}

在这种情况下，文档开始滚动到可能与 Section id 匹配的元素。

但是，滚动时间很短，因为所有内容都还没有在 DOM 中完全渲染，即使只有几毫秒。如果 SiblingWithChildren 组件尚未完全加载，则会影响文档的高度。

使用 setTimeout 似乎很脆弱。

Answer 1

componentDidUpdate 仅在更新时触发。

在初始加载时，您需要 componentDidMount。

React 组件生命周期的文档位于 https://reactjs.org/docs/react-component.html .