关于前端:vue3和react17三-生命周期ts

学习 react 的生命周期的时候认为会 vue 差不多, 后果发现还是有差异的, vue3 的生命周期则和 vue2 没什么变动,

这次文章比拟长, 比拟偏重父子生命周期程序和 react 方面, 其中一些图片是援用局部文章的

喜爱就给个赞吧, 该系列还在更新

react

组件生命周期图

生命周期 API

hooks 模仿生命周期

模仿 componentDidMount

useEffect(() => console.log('componentDidMount'), []);

模仿 shouldComponentUpdate

const MemoChild = React.memo(() => {...}, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
)

模仿 componentDidUpdate

useEffect(() => console.log('mounted or updated'));

不仅能够拜访 componentDidUpdate，还能够拜访 componentDidMount，如果只想模仿 componentDidUpdate，

const ref = useRef(true);
useEffect(() => {if (ref.current) {ref.current = false;}
   console.log('componentDidUpdate')
});

模仿 componentWillUnmount

useEffect(() => {return () => {console.log('模仿 componentWillUnmount');
  }
}, []);

父子组件生命周期程序

Parent.tsx

为了更好的阐明, Parent.tsx 应用的是 hooks 写法

const MemoChild = React.memo(() => {useEffect(() => console.log("MemoChild. componentDidMount"), []);
    console.log("MemoChild, function render");
    return <div>memo</div>;
  },
  () => false);

function Parent() {let [show, setShow] = useState(true);
  console.log("Parent, function render");
  useEffect(() => console.log("Parent. componentDidMount"), []);
  useEffect(() => () => console.log("Parent. componentWillUnmount"), []);
  useEffect(() => console.log("Parent. show updated"), [show]);
  return (
    <ul>
      <button
        onClick={() => {setShow(!show);
        }}
      >
        按钮
      </button>

      {show ? (<Child count2={2333}>
          <MemoChild></MemoChild>
        </Child>
      ) : (<MemoChild></MemoChild>)}
    </ul>
  );
}

Child.tsx

Child.tsx 应用的是 ReactComponent 写法

import React from "react";
interface countProp {count2: number;}
interface testState {count: number;}
class Child extends React.Component<countProp, testState> {static getDerivedStateFromProps(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");
    return true;
  }
  getSnapshotBeforeUpdate() {console.log("Child. getSnapshotBeforeUpdate");
    return null;
  }
  componentDidUpdate(props: any, state: any, snapshot: any) {console.log("Child. componentDidUpdate");
    console.log("snapshot:", snapshot);
  }
  componentWillUnmount() {clearInterval(this.timerID);
    console.log("Child. componentWillUnmount");
  }

  render() {const { children} = this.props;
    const {count} = this.state;

    console.log("Child. render");
    return (
      <>
        <ul>
          <li>state: {count}</li>
        </ul>
        {children}
      </>
    );
  }
}

程序

下面渲染到挂载代码打印的程序

 Parent, function render
 Child. constructor
 Child. getDerivedStateFromProps
 Child. render 
 MemoChild, function render
 Child. componentDidMount
 MemoChild. componentDidMount
 Parent. componentDidMount
 Parent. show updated

在 Child.tsx 中 componentDidMount 周期中应用到 setData, 打印

 Child. getDerivedStateFromProps
 Child. shouldComponentUpdate
 Child. render
 Child. getSnapshotBeforeUpdate
 Child. componentDidUpdate
 snapshot: null

当咱们点击 parent 的按钮, 暗藏 Child.tsx, 打印

Parent, function render
MemoChild, function render
Child. componentWillUnmount
Parent. show updated

React 总结

组件到挂载期间, 先实现
Parent function > Child(constructor->getDerivedStateFromProps->render) > MemoChild function > componentDidMount (Child->MemoChild->Parent)

通过下面的程序能够发现, React 的周期是依照子组件程序挂载后, 才挂载 Parent

• ==render== 以及 ==render== 之前的生命周期，则 父组件先执行
• ==render== 以及 ==render== 之后的申明周期，则子组件先执行，并且是与父组件交替执行

Vue

生命周期图

生命周期 API

beforeCreate -> 应用 setup()
created -> 应用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activated -> onActivated
deactivated -> onDeactivated

onRenderTracked 和 onRenderTriggered

其中新增了两个 onRenderTracked 和 onRenderTriggered. 提供调试应用

• onRenderTracked(状态跟踪), 当组件第一次渲染时, 咱们设置响应值 (a) 的时候, 并且 get(比方 html 中的 {{a}})获取时触发

• onRenderTriggered(状态触发), 扭转响应值触发

  event 对象属性

• newValue 更新后变量的值
• oldValue 更新前变量的值

• target 目前页面中的响应变量和函数

生命周期 API

父子周期程序

Parent.vue

<template>
  <div>
    <button @click="onBtnClick"> 按钮 </button>
    <!-- <button @click="count++"> 按钮 count</button> -->
    <Child v-if="bool"> </Child>
    <div>{{count}}</div>
  </div>
</template>

<script setup lang="ts">
import {onActivated, onDeactivated, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, ref} from "vue";
import Child from "./Child.vue";
console.log("Parent setup");
const bool = ref(true);
let count = ref(0);
function onBtnClick() {bool.value = !bool.value;}
onMounted(() => {console.log("Parent onMounted");
  count.value++;
});
onUpdated(() => {console.log("Parent onUpdated");
});
onRenderTracked((event) => {console.log("Parent onRenderTracked", event);
});
onRenderTriggered((event) => {console.log("Parent onRenderTriggered", event);
});
onActivated(() => {console.log("Parent onActivated");
});
onDeactivated(() => {console.log("Parent onDeactivated");
});
onUnmounted(() => {console.log("Parent onUnmounted");
});
</script>

Child.vue

<template>
  <div>Child {{count}}</div>
</template>

<script lang="ts">
import {ref, defineComponent} from "vue";

export default defineComponent({setup() {const count = ref(0);
    console.log("Child setup");
    return {count};
  },
  mounted() {console.log("Child onMounted");
    this.count++;
  },
  updated() {console.log("Child updated");
  },
  activated() {console.log("Child onActivated");
  },
  deactivated() {console.log("Child onDeactivated");
  },
  renderTracked(event) {console.log("Child onRenderTracked", event);
  },
  renderTriggered(event) {console.log("Child onRenderTriggered", event);
  },
  unmounted() {console.log("Child onUnmounted");
  },
});
</script>

程序

Parent setup
Parent onRenderTracked {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
Parent onRenderTracked {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
Child setup
Child onRenderTracked {effect: ReactiveEffect, target: RefImpl, type: 'get', key: 'value'}
Child onMounted
Child onRenderTriggered {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: 1}
Parent onMounted
Parent onRenderTriggered {effect: ReactiveEffect, target: RefImpl, type: 'set', key: 'value', newValue: 1}
Child onActivated
Parent onActivated
Parent onUpdated
Child updated

vue 生命周期总结

Parent setup > Child setup > Child onMounted > Parent onMounted > Child onActivated > Parent onActivated

onActivated 更像 $nextTick, 所有子组件挂载后才进行, vue 与 react 类似, 都是挂载前父子程序, 挂载中 则是 子父程序

参考

深刻详解 React 生命周期
Vue3 官网文档