挂载指的是组件被实例化并插入到dom中
顺序如下:
constructor -> getDerivedStateFromProps -> render -> componentDidMount
当state变化或者props变化会引起更新
顺序如下:
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
指的是组件被从dom移除
只会执行一个生命周期:
componentWillUnmount
这张图形象表示了不同阶段生命周期函数执行顺序.
render() 方法是 class 组件中唯一必须实现的方法。
当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一:
render() 函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。
注意
如果 shouldComponentUpdate() 返回 false,则不会调用 render()。
在 React 组件挂载之前,会调用它的构造函数。
通常,在 React 中,在构造函数中只做两件事:
注意:
componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。
在这里可以
注意
你可以在 componentDidMount() 里可以直接调用 setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下,用户也不会看到中间状态。请谨慎使用该模式,因为它会导致性能问题。通常,你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置,比如实现 modals 和 tooltips 等情况下,你可以使用此方式处理.
componentDidUpdate() 会在更新(dom已经更新)后会被立即调用。首次渲染不会执行此方法。
当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)。
你也可以在 componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语件里,正如上述的例子那样进行处理,否则会导致死循环。它还会导致额外的重新渲染,虽然用户不可见,但会影响组件性能。不要将 props “镜像”给 state,请考虑直接使用 props。
如果组件实现了 getSnapshotBeforeUpdate() 生命周期(不常用),则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
在这里可以释放资源, 比如清除定时器, removeEventListener
注意
这里边setState是无效的, 不应该调用
他的返回值可以决定是否重新渲染, 当 props 或 state 发生变化时,shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
这是一个性能优化的生命周期方法, 只有当你清楚的知道自己在做什么的是使用
getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。
getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见,但它可能出现在 UI 处理中,如需要以特殊方式处理滚动位置的聊天线程等。
此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state
注意
getDerivedStateFromError() 会在渲染阶段调用,因此不允许出现副作用。 如遇此类情况,请改用 componentDidCatch()。
此生命周期在后代组件抛出错误后被调用。 它接收两个参数:
componentDidCatch() 会在“提交”阶段被调用,因此允许执行副作用。 它应该用于记录错误之类的情况.
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期
State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段,不同的阶段涉及到特定的任务处理。
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数,onLaunch----当小程序初始化完成时,会触发 onLaunch
其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10个,也有的人认为是8个,无论是10个还是8个对于我而言都是一样的,我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解
请不要死记生命周期的顺序和作用,要理解 React 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求,通过这些生命周期,我们可以完成一些事情。主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文
每个React类组件都包含“生命周期方法”(function组件是没有生命周期方法的),你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。在接下来的文章中,生命周期方法的书写会遵照如下规则,以方便大家理解。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!