4.vue和react一起学 (^_^)

最新推荐文章于 2024-04-23 17:20:53 发布

林柏川

最新推荐文章于 2024-04-23 17:20:53 发布

阅读量233

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45490588/article/details/106484730

版权

本文探讨了React和Vue的生命周期，指出React的生命周期相对较抽象，并提供了React组件的生命周期代码示例。同时，提到了页面加载和点击事件的交互场景。

摘要由CSDN通过智能技术生成

lifecycle生命周期&event事件

`react`

react的生命周期相对于vue比较抽象一点，如下图1-1：
在这里插入图片描述

图1-1 图片来源 —— https://www.jianshu.com/p/514fe21b9914

具体代码
// react-vue-lifecycle-event\react-jsx\react-component.js

// 类组件
class JsxComponetOne extends React.Component {
   
  constructor(props){
   
    super();
    this.state ={
   
       status: 1
    };
  }

  componentWillMount() {
   
    console.log("组件即将挂载")
    console.log("-------------------------------------------------")
  } 
  componentDidMount() {
   
    console.log("组件已挂载")
    console.log("-------------------------------------------------")
  }
  componentWillReceiveProps(nextProps) {
   
    console.log("组件将接受属性,新属性---",nextProps)
    console.log("-------------------------------------------------")
  }
  shouldComponentUpdate(nextProps, nextState){
   
    const shouldUpdate = !!nextState.status%2;
    console.log(`状态或者属性变化${
     shouldUpdate?"":"不"}更新组件,新状态属性---`,nextProps, nextState);
    console.log("-------------------------------------------------")
    return shouldUpdate
  }
  componentDidUpdate(props,state){
   
    const {
   props:nextProps, state:nextState }= this
    console.log("组件完成更新,旧状态属性---",props, state)
    console.log