为什么 React 文档建议在 componentDidMount 而不是 componentWillMount 中执行 AJAX?

IT技术 reactjs
2021-04-11 00:47:11

我理解为什么componentDidMount适用于需要访问 DOM 的任何内容,但 AJAX 请求不一定或通常需要这样做。

是什么赋予了?

3个回答

componentDidMount是为了副作用。添加事件侦听器、AJAX、改变 DOM 等。

componentWillMount很少有用;特别是如果您关心服务器端渲染(添加事件侦听器会导致错误和泄漏,以及许多其他可能出错的东西)。

有关于componentWillMount从类组件中删除的讨论,因为它与构造函数的用途相同。它将保留在createClass组件上。

React 核心团队的人正在考虑从未来版本中删除 componentWillMount。
2021-05-23 00:47:11
添加事件侦听器会一直在服务器上导致错误和泄漏,或者只是在componentWillMount? 我真的看不出有什么区别。
2021-05-25 00:47:11
componentWillMount 在服务器上运行,但 componentWillUnmount(删除侦听器的位置)不是。这会导致您添加侦听器并且永远不会清理它们。
2021-05-28 00:47:11
@Alan - 如果你在客户端和服务器端都使用 React,你会发现里面的任何东西都componentWillMount将在服务器端渲染上执行。而如果您正在使用,componentDidMount那么它只会在客户端执行。因此,将componentWillMount执行外部交互或绑定到事件等的东西放入其中并不是一个好主意。如果您不打算在服务器端呈现您的组件,那么仅就潜在的代码可移植性而言仍然不是一个好主意。这完全不是它不好的主要原因,这在@daniula 的回答中有解释。
2021-06-12 00:47:11
@AnkitSinghaniya 它会破坏服务器渲染和浅层单元测试。
2021-06-14 00:47:11

我一开始也有同样的问题。我决定尝试提出请求,componentWillMount但最终遇到了各种小问题。

当 ajax 调用完成新数据时,我正在触发渲染。在某些时候,组件的渲染比从服务器获取响应花费的时间更多,此时 ajax 回调触发了卸载组件的渲染。这是一种边缘情况,但可能还有更多,因此坚持使用componentDidMount.

这是浏览器异步世界。你永远不应该假设一个函数总是比其他函数更快。正如我所提到的,这是边缘情况,可能意味着您应该优化渲染过程,但此时使用适当的生命周期方法将使您的生活更加轻松。
2021-05-28 00:47:11
@SooChengKoh - 绝对不应该在构造函数中做任何会导致必须设置的状态的事情,这将导致客户端和服务器上的竞争条件。您永远不应该调用setState组件构造函数,并且您无法确定 AJAX 调用何时完成。twitter.com/dan_abramov/status/576453138598723585
2021-05-31 00:47:11
@SooChengKoh ES6 类构造函数等效于componentWillMount,因此您仍应继续使用componentDidMountajax 调用。
2021-06-08 00:47:11
好的谢谢。认为它可能是这样的,但你是对的,令人惊讶的是 ajax 请求可以在渲染完成之前完成。
2021-06-18 00:47:11
@daniula 你确定吗?AJAX 请求如何在渲染前完成?
2021-06-20 00:47:11

根据文档设置状态componentWillMount不会触发重新渲染。如果 AJAX 调用没有阻塞,并且您Promise在成功时返回更新组件状态的 ,则有可能在组件呈现后响应到达。由于componentWillMount不会触发重新渲染,您将不会有您期望的行为,即使用请求的数据渲染组件。

如果您使用任何通量库并且请求的数据最终在组件所连接的商店中(或从连接的组件继承),这将不是问题,因为该数据的接收很可能会改变props最终。

componentWillMount不会仅仅因为在第一次渲染之前定义了新状态就触发重新渲染。但是如果setState在 AJAX 回调中调用,它肯定会在第一次渲染后被调用,并且会触发重新渲染。
2021-05-24 00:47:11