我在(React.Component)上查看了Facebook的文档,其中提到了如何componentWillMount
在客户端/服务器componentDidMount
上调用而仅在客户端上调用。这是什么componentWillMount
做的服务器?
ReactJS中的componentWillMount和componentDidMount有什么区别?
为了补充FakeRainBrigand所说的,componentWillMount
在服务器和客户端上渲染React时会被调用,但componentDidMount
只能在客户端上被调用。
componentWillMount
在render
组件的INITIAL之前完成,并用于评估道具并基于它们执行任何额外的逻辑(通常还用于更新状态),因此可以在服务器上执行以获取第一个服务器端呈现的标记。
componentDidMount
是render
在DOM更新之后的初始操作之后执行的(但至关重要的是,在此DOM更新绘制到浏览器之前,允许您与DOM本身进行各种高级交互)。当然,这只能在浏览器本身中发生,因此不会作为SSR的一部分发生,因为服务器只能生成标记,而不能生成DOM本身,这是在使用SSR发送到浏览器后完成的。
您说的与DOM的高级交互?Whaaaat ?? ...是的-由于DOM已更新(但是用户尚未在浏览器中看到更新),因此可以通过使用拦截实际绘制到屏幕上window.requestAnimationFrame
,然后执行诸如测量实际将输出的DOM元素,您可以对其执行进一步的状态更改,例如,将具有未知可变长度内容的元素的高度动画化(因为您现在可以测量内容并为动画分配高度)非常有用,或避免在某些状态更改期间出现内容闪烁的情况。
要非常小心,但在任何保护状态的变化componentDid...
作为否则会造成无限循环,因为状态的改变也将导致重新绘制,因此另一个componentDid...
和和和
componentWillMount本质上是构造函数。您可以设置不影响渲染的实例属性,同步从存储中提取数据并使用setState 设置实例属性,以及设置组件时需要运行的其他无副作用的简单代码。
它很少需要,ES6类根本不需要。
componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/
但是,这里有一个“陷阱”:在渲染发生之前,不会异步返回获取数据。这意味着组件将使用空数据至少渲染一次。
无法“暂停”渲染以等待数据到达。您不能以某种方式从componentWillMount返回诺言或在setTimeout中争执。
我们的组件将无权访问本机UI(DOM等)。我们也将无法访问子引用,因为它们尚未创建。componentWillMount()是我们处理配置,更新状态以及通常为第一个渲染准备的机会。这意味着我们可以根据道具值开始执行计算或处理。
根据文档(https://facebook.github.io/react/docs/react-component.html)
带有will前缀的方法会在发生某些事情之前立即调用,
事情发生后,以did为前缀的方法称为正确。