React學(xué)習(xí)筆記2---生命周期

陳偉發(fā)布于2019-08-30 15:55 / 2040人閱讀

摘要：生命周期函數(shù)指在某一個時刻組件會自動調(diào)用執(zhí)行的函數(shù)，的生命周期函數(shù)主要有初始化掛載更新卸載父組件在組件即將被掛載到頁面的時刻自動執(zhí)行，掛載完畢不再執(zhí)行組件被掛載到頁面之后，自動被執(zhí)行，掛載完畢不再執(zhí)行組件被更新之前，自動被執(zhí)行組件被更新之前

生命周期函數(shù)指在某一個時刻組件會自動調(diào)用執(zhí)行的函數(shù)，React的生命周期函數(shù)主要有

Initialization(初始化）

Mounting(掛載）

Updation(更新）

Unmounting(卸載）

父組件

  // 在組件即將被掛載到頁面的時刻自動執(zhí)行，掛載完畢不再執(zhí)行
  componentWillMount() {
    console.log("componentWillMount")
  }
   render() {
    console.log("parent render");
    return //JSX
  }
// 組件被掛載到頁面之后，自動被執(zhí)行，掛載完畢不再執(zhí)行
  componentDidMount() {
    console.log("componentDidMount")
  }

  // 組件被更新之前，自動被執(zhí)行
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate")
    return true;
  }

  // 組件被更新之前，它會自動執(zhí)行，但是它在shouldComponentUpdate之后執(zhí)行
  // 如果shouldComponentUpdate返回true它才執(zhí)行
  // 返回false，這個函數(shù)就不會被執(zhí)行了
  componentWillUpdate() {
    console.log("componentWillUpdate")
  }

  // 組件更新完成之后自動被執(zhí)行
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }

子組件

  // 一個組件從父組件接收了參數(shù)
  // 如果這個組件第一次存在于父組件中，不會執(zhí)行
  // 如果這個組件之前已經(jīng)存在于父組件中，才會執(zhí)行
  componentWillReceiveProps() {
    console.log("child componentWillReceiveProps")
  }

  // 當這個組件即將被從頁面中剔除的時候，會被執(zhí)行
  componentWillUnmount() {
    console.log("child componentWillUnmount")
  }