app.js

import React, { Component } from 'react';
// import logo from './assets/images/logo.svg';
// import './assets/css/App.css';

// 引入Home元件
// import Home from './components/Home'
// import News from './components/News'
// import List from './components/List'
// import Event from './components/Event'
// import TodoList from './components/TodoList'
// import TodoList2 from './components/TodoList2'
// import ReactForm from './components/ReactForm'
// import Header from './components/Header'
// import Father from './components/Father'
import LifeCycle from './components/LifeCycle'
// render 模版 jsx語法
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: true,
      title:'我是app的title'
    }
  }
  setFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  render () {
    return (
      <div className="App">
        {/* <img src={logo} className="App-logo" alt="logo" width='100px' /> */}
        {/* <Home></Home> */}
        {/* <News></News> */}
        {/* <Event></Event> */}
        {/* <List></List> */}
        {/* <TodoList></TodoList> */}
        {/* <TodoList2></TodoList2> */}
        {/* <ReactForm></ReactForm> */}
        {/* <Header></Header> */}
        {/* <Father></Father> */}
        {this.state.flag ? <LifeCycle title={this.state.title}></LifeCycle> : ''}

        <button onClick={this.setFlag}>掛載和銷燬生命週期函式元件</button>
      </div>
    );
  }
}

export default App;
 

LifeCycle.js

/*
https://reactjs.org/docs/react-component.html
React生命週期函式：
    元件載入之前，元件載入完成，以及元件更新資料，元件銷燬。
    觸發的一系列的方法 ，這就是元件的生命週期函式
元件載入的時候觸發的函式： 
    constructor 、componentWillMount、 render 、componentDidMount
元件資料更新的時候觸發的生命週期函式：
    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
你在父元件裡面改變props傳值的時候觸發的：
    componentWillReceiveProps
元件銷燬的時候觸發的：
    componentWillUnmount
必須記住的生命週期函式：
    *載入的時候：componentWillMount、 render 、componentDidMount（dom操作）
    更新的時候：componentWillUpdate、render、componentDidUpdate
    *銷燬的時候： componentWillUnmount
*/
import React, { Component } from 'react';
class LifeCycle extends Component {
  constructor(props) {
    console.log('01建構函式')
    super(props);
    this.state = {
      msg: '生命週期函式'
    };
  }
  //元件將要掛載的時候觸發的生命週期函式
  componentWillMount () {
    console.log('02元件將要掛載')
  }
  //元件掛載完成的時候觸發的生命週期函式
  componentDidMount () {
    //dom操作放在這個裡面    請求資料也放在這個裡面
    console.log('04元件將要掛載')
  }
  //是否要更新資料  如果返回true才會執行更新資料的操作
  shouldComponentUpdate (nextProps, nextState) {
    console.log('01是否要更新資料');
    console.log(nextProps);
    console.log(nextState);
    return true;
  }
  //將要更新資料的時候觸發
  componentWillUpdate () {
    console.log('02元件將要更新');
  }
  //元件更新完成
  componentDidUpdate () {
    console.log('04元件資料更新完成');
  }
  setData = () => {
    this.setState({
      msg: '更新後的資料'
    })
  }
  setTitle = () => {
    this.setState({
      title: '我是父元件改變後的title'
    })
  }
  // 你在父元件裡面改變props傳值的時候觸發的
  componentWillReceiveProps () {
    console.log('父子元件傳值，父元件裡面改變了props的值觸發的方法')
  }
  //元件銷燬的時候觸發的生命週期函式   用在元件銷燬的時候執行操作
  componentWillUnmount () {
    console.log('元件銷燬了');
  }
  render () {
    console.log('03資料渲染render')
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <h2>父元件傳過來的值-------------{this.props.title}</h2>
        <button onClick={this.setData}>點選更新資料</button>
        <button onClick={this.setTitle}>改變父元件的title資料</button>
      </div>
    );
  }
}

export default LifeCycle;