个人认为，react和vue的业务逻辑是相似的。vue在react上封装了更简单的方法，使用起来更方便，比如提供了方便的指令(v-for、v-if、v-model)和更多的属性(computed、watch)。我更喜欢用react，它更接近js，也更容易理解。

vue的生命周期如下图所示(非常清楚):初始化、编译、更新和销毁

具有两个生命周期的栗子

请注意，在触发vue的创建事件后，这指向vue实例，这很重要

！doctype HTML HTML Head metachartset=' UTF-8 ' Title Vue生命周期/Title Script src=' http :/js/vue . js '/script meta name=' viewport ' content=' width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，user-scale=no '/head body div class=' test ' style=' border 3360 1px黑色虚线；padding: 8px'{ { a } }/div div class=' test2 ' style=' border : 1px红色固体；margin-top : 10px；padding: 8px'我是content 2/div脚本类型=' text/JavaScript ' var myvue=new vue({ El : })。test '，data: {a: '我是内容，您可以通过在控制台中输入myVue.a=123456来更改我的值，created:function()。此时，实例已经解析完选项，这意味着：数据绑定、计算属性、方法、观察器/事件回调已经建立。//但是DOM编译还没有开始，$el还不存在，但是有一个实例存在，就是this.a存在，可以打印出来。console . log(' create ')；}，编译前： function () {console.log('编译未开始')；}，编译后调用compiled:函数(){//即可。此时所有指令都已经生效，所以数据的变化会触发DOM更新。但是，不能保证$el已经插入到文档中。Console.log('编译完成')；}，ready:函数(){//在编译结束后调用，并且$el第一次插入文档，例如第一次在附加的钩子之后。请注意，就绪挂钩必须由Vue插入触发(例如通过vm等方法或指令进行更新。$ appendTo())。Console.log(“一切就绪”)；}，attached : function(){//myvue。$ appendo(' . test2 ')暂时无法触发。不知道怎么解决。//虚拟机时调用。$el被插入到DOM中。它必须由指令或实例方法(如$appendTo())插入，并直接操作vm。$el不会触发这个钩子。Console.log('插入DOM成功')；}，分离的：function () {//触发事件myVue。$destroy(true)，其中参数true控制是删除DOM节点还是myVue。当vm。$el从DOM中删除。必须通过指令或实例方法删除。虚拟机的直接操作。$el不会触发这个钩子。Console.log('已成功删除DOM}，在破坏：函数(){//触发模式之前，键入myVue。控制台中的$ destroy()；//当实例被销毁时调用。此时，实例仍在运行。Console.log('销毁前')；}，驱逐舰d:函数(){//触发模式，键入myVue。控制台中的$ destroy()；myVue在哪里。$destroy(true)是删除DOM节点，这将触发分离的函数，但实例仍然存在。//实例销毁后调用。此时，绑定和实例的所有指令都已解除绑定。请注意，解除绑定不是销毁，所有子实例也已被销毁。Console.log('已销毁')；} });/脚本/正文/html I .反应生命周期

反应生命周期分为三种状态：1 .初始化2。更新3。破坏

初始化

1、getDefaultProps()

设置默认道具，或者使用ufaultProps设置组件的默认属性。

2、getInitialState()

使用es6类语法时没有这样的钩子函数，所以可以直接在构造函数中定义this.state。你现在可以使用这个道具

3、组件将安装()

它只在组件初始化时被调用，而不是在组件稍后更新时被调用，并且在整个生命周期中只被调用一次。此时，可以修改状态。

4、渲染()

react最重要的步骤是创建虚拟dom，执行diff算法和更新dom树。此时您不能更改状态。

5、组件安装()

组件呈现后只调用一次。

更新

6、组件将接收道具(下一个道具)

组件初始化时不调用，组件接受新道具时调用。

7、shouldComponentUpdate(下一个道具，下一个状态)

react性能优化的一个非常重要的部分。当组件接受新的状态或道具时调用，我们可以设置比较前后两个道具和状态是否相同，如果相同，则返回false防止更新，因为相同的属性状态肯定会生成相同的dom树，所以不需要创建新的dom树来比较diff算法和旧的dom树，节省了很多性能，尤其是在dom结构复杂的时候。

8、组件将更新数据(下一个道具，下一个状态)

它不会在组件初始化时调用，而只会在组件即将更新时调用。此时，可以修改状态

9、渲染()

组件渲染

10、组件更新()

组件初始化时不调用，组件更新后调用，此时可以获取dom节点。

从计算机上卸载

11、组件将卸载()

当组件即将卸载时调用，此时需要清除一些事件监视和计时器。

摘要

以上是边肖介绍的vue生命周期和react生命周期的对比，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！