ReactHooks学习纪录02（useEffect）

useEffect在Function组件里面使用生命周期

加载时生命周期 componentDidMount -- componentDidUpdate

• 使用前

import React, {Component} from 'react';
class Comp1 extends Component{
 constructor(props){
   super(props);
   this.state = { count:0 }
 }
 componentDidMount(){ console.log('componentDidMount 运行'); }
 componentDidUpdate(){ console.log('componentDidUpdate 运行'); }
 addCount(){
   this.setState({ count:this.state.count+1 })
 }
 render(){
   return (
     <div>
       <h2>{this.state.count}</h2>
       <button onClick={this.addCount.bind(this)}>点击</button>
     </div>
   )
 }
}
export default Comp1;

• 使用后

import React,{useState,useEffect} from 'react';

function Comp2(){
 const [count,addCount] = useState(0);
 useEffect(()=>{
   //相当于componentDidMount和componentDidUpdate的合并
   //首次打开和数据改变时都会调用
   console.log('加载');
 })
 return (
   <div>
     <h2>{count}</h2>
     <button onClick={()=>{addCount(count+1)}}>点击</button>
   </div>
 )
}
export default Comp2;

卸载时生命周期

• 使用前

import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
class Comp3 extends Component{
 render(){
   return (
     <div>
       <Router>
         <ul>
           <li><Link to="/">首页</Link></li>
           <li><Link to="/list">列表</Link></li>
         </ul>
        
         <Route path="/" exact component={Home} />
         <Route path="/list" component={List} />
       </Router>
     </div>
   )
 }
}
class Home extends Component{
 componentDidMount(){
   console.log('首页加载');
 }
 componentWillUnmount(){
   console.log('首页销毁');
 }
 render(){
   return ( <div> <h2>首页</h2> </div> )
 }
}
class List extends Component{
 componentDidMount(){
   console.log('列表页加载');
 }
 componentWillUnmount(){
   console.log('列表页销毁');
 }
 render(){
   return ( <div> <h2>列表页</h2> </div> )
 }
}
export default Comp3;

• 使用后

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Comp4() {
 return (
   <div>
     <Router>
       <ul>
         <li> <Link to="/">首页</Link> </li>
         <li> <Link to="/list">列表页</Link> </li>
       </ul>

       <Route path="/" exact component={Home} />
       <Route path="/list" component={List} />
     </Router>
   </div>
 )
}

function Home() {
 const [count,addCount]=useState(0);
 useEffect(()=>{
   console.log('首页加载'); //相当于加载时的生命周期
   return ()=>{ console.log('首页销毁') };//相当于卸载时的生命周期
 },[]);
   //useEffect的第二个参数是个数组，该数组代表着监听的状态，如果不写
   //点击按钮也会触发useEffect函数，如果是空数组，则不会触发，数组里面
   //有什么状态，什么状态改变时就会触发useEffect （里面可以写三元表达式）
   //[count>5?5:count]
 return (
   <div>
     <h2>首页 - {count}</h2>
     <button onClick={()=>{addCount(count+1)}}>点击增加</button>
   </div>
 )
}
function List() {
 useEffect(()=>{
   //相当于componentDidMount和componentDidUpdate
   console.log('列表页加载'); //相当于加载时的生命周期
   //相当于componentWillUnMount和componentDidUpdate
   return ()=>{ console.log('列表页销毁') }; //相当于卸载时的生命周期
 })
 return ( <div> <h2>列表页</h2> </div> )
}
export default Comp4;