react hooks 之 useEffect的 使用

这个东西类似于 之前 类的那种写法中的 声明周期函数
useEffect 是 相当于 DidMount 和 DidUpdate 两个周期函数

// 引入
import React,{
     useState,useEffect} from 'react';
useEffect(() => {
     
    console.log('111111111111');
  })

进入页面之后 就会打印 1111111

不过它 还 可以返回一个 函数 用来表示 是 组件 销毁的 声明周期函数

useEffect(() => {
     
    console.log('111111111111');
    return function(){
     
      console.log('3333333333333333');
    }
  })

用来表现 组件的销毁状态 只能通过路由的切换来实现 了
引入了 react 中的路由

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

function Hello(){
     
  useEffect(() => {
     
    console.log('111111111111');
    return function(){
     
      console.log('3333333333333333');
    }
  })
  return (
    <>
      我是第一个组件
    </>
  )
}
function World() {
     
  useEffect(()=>{
     
    console.log('2222222222222222222');
    return function () {
     
      console.log('44444444444444');
    }
  })
  return (
    <>
      我是第二个组件
    </>
  )
}
function App() {
     
  return (
    <div className="App">
      <p>React hooks中的声明周期函数</p>
      <Router>
        <li>
          <Link to="/">第一个组件</Link>
        </li>
        <li>
          <Link to="/world">第二个组件</Link>
        </li>
        <Route path="/" exact component={
     Hello}></Route>
        <Route path="/world" component={
     World}></Route>
      </Router>
    </div>
  );
}

export default App;

也确实实现了 触发了 组件销毁的 函数 不过这样也有一个新的问题了 就是 再点击本路由的时候 它的函数也会执行 这个肯定不是我们想要的 像这样的的效果

这个时候 还有解决方法 就是 我们的函数 useEffect 还有 第二个参数 我们放个空数组 他就不会 重复执行了

useEffect(() => {
     
    console.log('111111111111');
    return function(){
     
      console.log('3333333333333333');
    }
  },[])

其实这个空的数组中可以 放入一个变量 该函数的执行 可以判定为 数组里面的变量是否改变 改变的情况下 才会触发本次函数

关注我 持续更新 前端知识 努力成为大佬