React和Vue生命周期、渲染顺序

主要就是命名不同

目录

React

组件挂载

挂载前constructor()

挂载时render()

挂载后componentDidMount():初始化节点

更新

更新时render():prop/state改变

更新后componentDidUpdate()

卸载

卸载前componentWillUnmount():清理

Vue

初始阶段:beforeCreate、created、beforeMount、mounted

更新阶段:beforeUpdate、updated

销毁阶段:beforeUnmout、unmounted


React

组件挂载

挂载前constructor()

如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数

挂载时render()

class 组件中唯一必须实现的方法。

挂载后componentDidMount():初始化节点

组件(插入 DOM 树中) 立即调用。依赖于 DOM 节点的初始化应该放在这里。

更新

更新时render():prop/state改变

它只有在 prop 或state 发生变化时才可能更新和重新渲染

更新后componentDidUpdate()

首次渲染不会执行此方法。

卸载

卸载前componentWillUnmount():清理

在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。

javascript 复制代码
class Welcome extends React.Component {
    state = {
        msg: 'hello world'
    }
    constructor(props){
        super(props);
        console.log('constructor');
    }
    componentDidMount = () => {
        // react中发起ajax请求的初始操作,在这个钩子中完成
        console.log('componentDidMount');
    }
    componentDidUpdate = () => {
        // 等DOM更新后触发的钩子
        console.log('componentDidUpdate');
    }
    componentWillUnmount = () => {
        console.log('componentWillUnmount');
    }
    handleClick = () => {  
        /* this.setState({
          msg: 'hi react'
        }); */
        //this.forceUpdate();
        root.unmount();   // 触发卸载组件
    }
    render(){
        console.log('render');
        return (
            <div>
                <button onClick={this.handleClick}>点击</button>
                { this.state.msg }
            </div>
        );
    }
}

Vue

初始阶段:beforeCreate、created、beforeMount、mounted

一般在,created,mounted中都可以发送数据请求 ,但是,大部分时候,会在created发送请求。因为这样可以更短的时间去响应数据。

更新阶段:beforeUpdate、updated

销毁阶段:beforeUnmout、unmounted

相关推荐
z千鑫7 分钟前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
小白学前端6662 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
苹果醋32 小时前
React系列(八)——React进阶知识点拓展
运维·vue.js·spring boot·nginx·课程设计
王小王和他的小伙伴2 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
outstanding木槿2 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08213 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
隐形喷火龙3 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
等一场春雨3 小时前
springboot 3 websocket react 系统提示,选手实时数据更新监控
spring boot·websocket·react.js
风无雨3 小时前
react杂乱笔记(一)
前端·笔记·react.js
北海天空4 小时前
reactHooks到底钩到了什么?
前端·react.js