原始生命周期函数

componentDidMount

componentDidUpdate

componentWillUnmount

采用原始的方式把计数器的Demo增加两个生命周期函数componentDidMount和componentDidUpdate。分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。代码如下：

import React, { Component } from 'react';

class Example3 extends Component {
    constructor(props) {
        super(props);
        this.state = { count:0 }
    }


    componentDidMount(){
        console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
    }

    render() { 
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.addCount.bind(this)}>Chlick me</button>
            </div>
        );
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
}

export default Example3;

React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。

组件中经常用到componentWillUnmount生命周期函数（组件将要被卸载时执行）。比如我们的定时器要清空，避免发生内存泄漏;比如登录状态要取消掉，避免下次进入信息出错。

app.js

import React, { useState , useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

function List() {
    useEffect(()=>{
        console.log('useEffect=>老弟，你来了！List页面')
        return ()=>{
            console.log('老弟，你走了!List页面')
        }
    })

    return <h2>List-Page</h2>;
}

function App(){
  const [ count , setCount ] = useState(0);

  useEffect(()=>{
    console.log(`useEffect=>You clicked ${count} times`)

    return ()=>{
      console.log('====================')
    }
  },[count])

  return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={()=>{setCount(count+1)}}>click me</button>

        <Router>
          <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
          </ul>
          <Route path="/" exact component={Index} />
          <Route path="/list/" component={List} />
        </Router>
      </div>
  )
}

export default App;

index.js

import React from "react";
import {render} from "react-dom"
import App from "./components/app"
import {BrowserRouter} from "react-router-dom";

//渲染组件,我们使用react-router组件渲染组件时需要使用路由器组件标签,我们可以使用"<BrowserRouter>"或者是"<HashRouter>"。但需要注意哟，这是一个SPA应用哟~
render(
    (
        <BrowserRouter>
            <App />
        </BrowserRouter>
    ),
    document.getElementById("root")
)

PS:

一、useEffect的第二个参数：

实现类似componentWillUnmount的效果，它是一个数组，数组中可以写入很多状态对应的变量，意思是当状态值发生变化时，我们才进行解绑。如果我们想每次count发生变化，我们都进行解绑，只需要在第二个参数的数组里加入count变量就可以了但是当传空数组[]时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数。