东丰网站建设,前端培训出来进公司都不会,网站开源代码模版,网站设计英文翻译主要就是命名不同
目录
React
组件挂载
挂载前constructor()
挂载时render()
挂载后componentDidMount()#xff1a;初始化节点
更新
更新时render()#xff1a;prop/state改变
更新后componentDidUpdate()
卸载
卸载前componentWillUnmount()#xff1a;清理
V…主要就是命名不同
目录
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() 中创建的订阅等。
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 (divbutton onClick{this.handleClick}点击/button{ this.state.msg }/div);}
}
Vue
初始阶段beforeCreate、created、beforeMount、mounted
一般在createdmounted中都可以发送数据请求但是大部分时候会在created发送请求。因为这样可以更短的时间去响应数据。
更新阶段beforeUpdate、updated
销毁阶段beforeUnmout、unmounted
