vue3与react17(三)——生命周期(ts)

学习react的生命周期的时候，本以为会和vue差不多，结果发现还是有区别的。vue3的生命周期和vue2是一样的。这篇文章比较长。更多地关注父子生命周期序列并做出反应。部分图片参考了部分文章。如果你喜欢它，请给它一个赞。本系列还在更新react组件生命周期图生命周期。,nextState)在调用render方法之前被调用，在初始化和后续更新时都会被调用。render方法是唯一必须在类组件中实现的方法。它用于渲染dom。render()方法必须返回reactDOMcomponentDidMount组件挂载后（插入DOM树后）立即调用更新shouldComponentUpdate(nextProps,nextState)在组件更新前调用，可以控制组件是否更新，当更新时返回true组件已更新，返回false以在提交最新渲染输出之前不更新getSnapshotBeforeUpdate(prevProps,prevState)调用。也就是说，render之后，在组件即将挂载的时候调用。componentDidUpdate(prevProps,prevState,snapshot)将在更新后立即调用。第一个渲染不会被执行，第三个在传递给unmountcomponent的“snapshot”参数时调用WillUnmount组件即将被卸载或销毁。hooks模拟生命周期simulatecomponentDidMountuseEffect(()=>console.log('componentDidMount'),[]);模拟shouldComponentUpdateconstMemoChild=React.memo(()=>{...},(prevProps,nextProps)=>nextProps.count!==prevProps.count)模拟componentDidUpdateuseEffect(()=>console.log('mountedor更新'））;不仅可以访问componentDidUpdate，还可以访问componentDidMount，如果只想模拟componentDidUpdate，constref=useRef(true);useEffect(()=>{if(ref.current){ref.current=false;}console.log('componentDidUpdate')});simulatecomponentWillUnmountuseEffect(()=>{return()=>{console.log('simulatecomponentWillUnmount');}},[]);父子组件生命周期顺序Parent.tsx为了更好的说明，Parent.tsx使用hooks写法constMemoChild=React.memo(()=>{useEffect(()=>console.log("MemoChild.componentDidMount"),[]);console.log("MemoChild,functionrender");return

;},()=>false);functionParent(){let[show,setShow]=使用状态（真）；console.log("Parent,functionrender");useEffect(()=>console.log("Parent.componentDidMount"),[]);useEffect(()=>()=>console.log("Parent.componentWillUnmount"),[]);useEffect(()=>console.log("Parent.showupdated"),[show]);return(

{setShow(!show);}}>点击{show?():()}

);}Child.tsxChild.tsx使用的是ReactComponent写法importReactfrom"react";interfacecountProp{count2:number;}interfacetestState{count:number;}classChildextendsReact.Component{staticgetDerivedStateFromProps(props:countProp,_state:testState){console.log("Child.getDerivedStateFromProps");return{count:props.count2,};}constructor(props:countProp){super(props);this.state={count:0,};console.log("Child.constructor");}componentDidMount(){this.setState({count:this.state.count+123,});console.log("Child.componentDidMount");}shouldComponentUpdate(){console.log("Child.shouldComponentUpdate");返回true;}getSnapshotBeforeUpdate(){console.log("Child.getSnapshotBeforeUpdate");returnnull;}componentDidUpdate(props:any,state:any,snapshot:any){console.log("Child.componentDidUpdate");控制台。log("snapshot:",snapshot);}componentWillUnmount(){clearInterval(this.timerID);console.log("Child.componentWillUnmount");}render(){const{children}=this.props;const{计数}=this.state;console.log("Child.render");return(<>

• state:{count}

{children});}}上面的序列渲染到挂载代码打印顺序Parent,functionrenderChild.constructorChild.getDerivedStateFromPropsChild.renderMemoChild,functionrenderChild.componentDidMountMemoChild.componentDidMountParent.componentDidMountParent.showupdated在Child.tsx中componentDidMount周中使用到setData,打印Child.getDerivedStateFromPropsChild.shouldComponentUpdateChild.renderChild.getSnapshotBeforeUpdateChild.componentDidUpdatesnapshot:null当我们点击parent按钮时，隐藏Child.tsx，打印Parent，函数renderMemoChild，函数renderChild.componentWillUnmountParent.showupdatedReact总结要挂载的组件，首先完成Parent函数>(constructor->getDerivedStateFromProps->render)>MemoChild函数>componentDidMount(Child->MemoChild->Parent)通过上面的顺序可以发现，React的循环是在子compon之后挂载Parent==render=ents按顺序安装=和==render==之前的生命周期，父组件先执行==render==和==render==之后的语句周期，子组件先执行，与父组件交替执行vue生命周期图component生命周期APIbeforeCreate->使用setup()created->使用setup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeUnmount->onBeforeUnmountunmounted->onUnmountedererrorCaptured->onErrorCaptureredrenderTracked->onRenderTrackedrenderTriggered->onRenderactivated->onRender激活->onRenderonDeactivatedonRenderTracked和onRenderTriggered其中新增了两个onRenderTracked和onRenderTriggered。提供调试使用onRenderTracked（状态追踪），当组件第一次渲染时，当我们设置响应值（a），并且获取（如html中的{{a}}）获取时触发onRenderTriggered（状态触发），并更改响应值触发事件对象属性newValue更新后变量的值oldValue更新前变量的值target当前页面中的响应变量和函数生命周期APICol1Col2setup是实例初始化后挂载前，无法getthedomnodebeforeMountiscalledbeforemountstarts:第一次调用相关的render函数mounted在实例挂载完成后调用，此时传给app.mount的元素已经是新创建的vm.$el替换了beforeUpdate在数据更改之后但在更新DOM之前调用。updated在虚拟DOM由于数据更改而重新渲染和更新后调用。activated当一个被keep-alive缓存的组件被激活时被调用。即当页面显示在屏幕上时，在卸载组件实例之前调用deactivateddeactivatedbeforeUnmount。在此阶段，该实例仍然可以正常运行。unmounted在卸载组件实例后调用。当从后代组件捕获错误时调用errorCaptured。renderTracked在被跟踪的虚拟DOM被重新渲染时被调用。renderTriggered在触发虚拟DOM重新渲染时调用。父子周顺序Parent.vueChild.vueorderParentsetupParentonRenderTracked{effect:ReactiveEffect,target:RefImpl,type:'get',key:'value'}ParentonRenderTracked{effect:ReactiveEffect,target:RefImpl,type:'get',key:'value'}ChildsetupChildonRenderTracked{effect:ReactiveEffect,target:RefImpl,type:'get',key:'value'}ChildonMountedChildonRenderTriggered{effect:ReactiveEffect,target:RefImpl,type:'set',键:'value',newValue:1}ParentonMountedParentonRenderTriggered{effect:ReactiveEffect,target:RefImpl,type:'set',key:'value',newValue:1}ChildonActivatedParentonActivatedParentonUpdatedChildupdatedvue生命周期总结Parentsetup>Childsetup>ChildonMounted>ParentonMounted>ChildonActivated>ParentonActivatedonActivated更像是$nextTick，所有的子组件都是挂载后进行的。Vue类似于React。挂载前是父子顺序，挂载时参考父子顺序。React生命周期深入讲解Vue3官方文档