React-hooks useState useEffect用法_usestate可以接受两个参数-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41587194/article/details/109589047

本文通过具体示例介绍了React Hooks中useEffect的基本用法及其在不同场景的应用。包括如何使用useEffect来处理组件加载与卸载时的操作，以及如何利用依赖数组控制useEffect的触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()

import React, {useState,useEffect} from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
function Index(){
  useEffect(()=>{
    console.log('hello,index')
    return ()=>{
      console.log('bye,index')//路由解綁
    }
  },[])//第二個參數設為空時只有index被加載或者解綁時才知曉useEffect
  return <h2>hello,index</h2>
}
function List(){
  useEffect(()=>{
    console.log('hello,list')
    return ()=>{//路由解綁
      console.log('bye,list')
    }
  },[])
  return <h2>hello,list</h2>
}
function Example(){
  const [count,setCount]=useState(0)
  useEffect(()=>{
    console.log(`你點擊了${count}次`)
    return ()=>{
      console.log(1111111111)
    }
  },[count])//只要count發生改變都會執行return的解綁函數
  return (
    <div>
      <p>点击{count}次</p>
      <button onClick={()=>{setCount(count+1)}}>点击</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 Example