React Hooks--useEffect代替常用生命周期函数方式

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;

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;

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")
)

// 声明一个叫 “count” 的 state 变量 
 const [count, setCount] = useState(0);
// 更新state
<button onClick={() => setCount(count + 1)}>
    Click me
  </button>