为什么 StencilJS 文档建议在 componentWillLoad 中进行网络调用？

Question

我正在开发一个 Stencil JS 项目，该项目通过一些网络调用来获取数据和更新状态。

在 React JS 中，网络调用将在 componentDidMount 生命周期方法中完成，而不是在 componentWillMount 方法中。

我很惊讶在 Stencil 文档中发现几乎相反的建议：

componentWillLoad() 在组件第一次连接到 DOM 后调用一次。由于这个方法只被调用一次，它是一个 异步加载数据的好地方。

在另一种情况下，Stencil 也偏爱 componentWillLoad 而不是 componentDidLoad。使用 componentDidLoad 更新状态时，它会注销控制台警告：

STENCIL：状态/道具“exampleProp”在“componentDidLoad()”期间发生了变化，这会触发额外的重新渲染，尝试设置 "componentWillLoad()"

为什么 Stencil 将用户推送到 componentWillLoad 方法（渲染前），而 React 将用户推送到 componentDidMount 方法（渲染后）？

Answer 1

刚开始我对 React 了解不多，但我看到 componentWillMount was deprecated 有以下解释。

有一个常见的误解，即在 componentWillMount 中获取可以让您避免第一个空渲染状态。实际上，这从来都不是真的，因为 React 总是在 componentWillMount 之后立即执行渲染。如果在 componentWillMount 触发时数据不可用，则无论您在哪里启动获取，第一个渲染仍将显示加载状态。这就是为什么在绝大多数情况下将 fetch 移动到 componentDidMount 没有明显的效果。

在 Stencil 中，您可以在 componentWillLoad 中返回一个 Promise，这将阻止组件在 Promise 解决之前呈现（但我从未找到一个实际的用例）。

如果您不返回 Promise，则取决于您的 render 方法（任何可能的其他渲染生命周期方法）componentDidLoad 的运行速度会稍晚一些，这在大多数情况下可能是最少的（即“没有明显的效果”）但没有任何优势（我能想到的）。

componentDidLoad 适用于必须在第一次渲染之后立即运行的东西。

同样，控制台警告是因为在大多数情况下同步修改 componentDidLoad 中的 @State() 或 @Prop() 属性没有意义，因为它通常可以轻松移动到更早的生命周期方法（避免在初始渲染之后重新渲染）。不过也有例外，例如如果状态值取决于生成的 DOM，在这种情况下您可以忽略警告。

请注意，在某些情况下connectedCallback 可能比componentWillLoad 更合适，例如the clock example 在Stencil's Life Cycle Methods docs.