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

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