blog
blog copied to clipboard
wuweijia
React、vue 生命周期是为了解决的哪些场景的问题及自己的理解
闲来无事, 来占个坑. 下面来谈谈自己对生命周期的理解.
首先, 什么是生命周期呢? 生命周期就是一个组件从创建到销毁的过程, 为了方便我们进行一些自定义操作, React和Vue提供了一些生命周期钩子函数, 以React为例:
React的生命周期主要包括初始化、更新、销毁三个阶段:
-
在初始阶段, 组件主要是进行了组件props和state的初始赋值以及DOM树的渲染,在组件生命周期中只会执行一次. 主要的钩子函数是componentDidMount, 此时DOM树已经挂载成功. 一般, 我们在这里请求数据, 也可以在这里setState;
-
更新阶段: 当组件所依赖的props或者state发生改变时, 就会触发更新操作, 更新操作在组件的生命周期中可执行多次, 主要的生命周期钩子函数有: (1). shouldComponentUpdate, 这个钩子函数是react优化的重要方案之一, 返回值是true/false, 用于判断是否需要重新执行render函数. 一般, 我们可以用prevState/prevProps同this.state/this.props进行对比, 来判断是否需要重新render (2). componentDidUpdate: 这个发生在组件更新之后, 可以用来发请求或setState, 但是在setState时, 一定要加判断, 否则, 就会陷入死循环...... (3). componentwillUpdate和componentWillReceiveProps: 这两个生命周期已经被弃用了, 尽量不要使用, 上次用了个componentWillReceiveProps被我们老大说了......
-
销毁阶段: 当组件销毁的时候会调用componentWillUnmount钩子, 这个钩子函数主要做一些清理工作, 比如说定时器、websocket等等, 上次因为我没有清理websocket, 把浏览器给整崩了......
Vue的生命周期的话, 自我感觉要简单得多, 记起来也比较好记, 主要就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated以及beforeDestroy和destroyed, 使用场景和React也是大同小异. 可能是Vue实现了数据双向绑定的缘故, 不需要考虑data更新的问题, 常用的就是在created里面调调接口, 在mounted里面获取DOM元素, 在destroyed 里面清理一些定时器啊啥的.
对比来说, 感觉React生命周期确实要复杂一点, 做了两个月的React感觉比一年Vue踩的坑还多, 当然, 也可能是我没好好看官方文档, 哈哈哈.
以上都是自己在实际工作中对生命周期的一点理解和总结, 期待大佬们的回答, 共勉!!!
我加一条可能会问到的
正常情况下，当组件发生更新时，组件的生命周期方法的调用顺序 ？
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
@xie991283109。 怎么理解componmenWillUpdate 跟另一个已经启用，尽量不要用 One of the biggest lessons we’ve learned is that some of our legacy component lifecycles tend to encourage unsafe coding practices. They are:
componentWillMount componentWillReceiveProps componentWillUpdate These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering. Because of this, we will be adding an “UNSAFE_” prefix to these lifecycles in an upcoming release. (Here, “unsafe” refers not to security but instead conveys that code using these lifecycles will be more likely to have bugs in future versions of React, especially once async rendering is enabled.) 官方文档有说
react 总结起来就是挂载。更新。卸载，vue 看起来多了一步create，如何解释这个流程比react多的好处呢。或者说他的作用比react多了什么？ 用的vue不多，望解释😅
react 总结起来就是挂载。更新。卸载，vue 看起来多了一步create，如何解释这个流程比react多的好处呢。或者说他的作用比react多了什么？ 用的vue不多，望解释😅
你觉得created 做了什么其他操作么？
我觉得你可能更需要这个问题 Vue为什么没有shouldComponentUpdate的生命周期？
追加： 组件render的次数跟浏览器界面更新次数有什么关系？
组件render一次, 浏览器就会渲染一次 组件首次render的时候, DOM是一个从无到有的过程, 后面组件每次更新, 因为React用的虚拟dom, 采用了diff算法, 所以每次render的时候, 浏览器只会对被改变了的元素进行局部更新.
追加： 组件render的次数跟浏览器界面更新次数有什么关系？
组件render一次, 浏览器就会渲染一次 组件首次render的时候, DOM是一个从无到有的过程, 后面组件每次更新, 因为React用的虚拟dom, 采用了diff算法, 所以每次render的时候, 浏览器只会对被改变了的元素进行局部更新.
你可以写react 的demo 试试 再说哦 -。-
我理解错了, render次数 >= 浏览器更新次数 在一个事件周期内, render多次, 浏览器出于性能考虑, 都只会最后执行一次更新哈
@xie991283109。 怎么理解componmenWillUpdate 跟另一个已经启用，尽量不要用
写错了, 是弃用了...
我就是没理解“启用”，然后一天晚上我突然明白了 “启用” =》“弃用” 😄
react 总结起来就是挂载。更新。卸载，vue 看起来多了一步create，如何解释这个流程比react多的好处呢。或者说他的作用比react多了什么？ 用的vue不多，望解释😅
你觉得created 做了什么其他操作么？
我觉得你可能更需要这个问题 Vue为什么没有shouldComponentUpdate的生命周期？
没有，还是两个问题。我的问题是同样是虚拟dom，为什么vue比react多了一个create阶段？