「React」之useEffect

W-MoMo

已于 2023-08-01 18:11:10 修改

阅读量130

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

于 2023-07-31 21:26:19 首次发布

本文链接：https://blog.csdn.net/m0_65489440/article/details/132030930

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章介绍了React函数式组件如何使用useEffect和useState进行状态管理和模拟生命周期方法。通过示例展示了useEffect在组件挂载和卸载时执行，以及在状态变化时的响应。同时，文章演示了useState进行状态更新和通过useHistory进行路由导航的操作。

摘要由CSDN通过智能技术生成

前言

react函数式组件本没有生命周期函数，提供了useEffect副作用函数借以处理类似的功能

介绍

// rfc
import React, { useEffect, useState } from 'react'
import { Button } from 'antd'
import { useHistory } from 'react-router-dom'

export default function Index() {
  const [state, setState] = useState(0)

  useEffect(() => {
    // 页面第1次加载会触发
    console.log('Component mounted')
    // 页面卸载时触发
    return () => {
      console.log('Component WillUnmount')
    }
  }, [])

  // state每次改变都会触发
  useEffect(() => {
    console.log('Component DidUpdate')
  })

  // 在第1次和state数据发生改变时都会触发
  useEffect(() => {
    // 副作用代码
    console.log('State Value DidUpdate')
  }, [state])

  // state呈现递增变化的方法
  const addNumber = () => {
    const newNumber = state - -1
    setState(newNumber)
  }

  let history = useHistory()
  const toIndex = () => {
    history.push('/debut')
  }

  return (
    <div>
      <div>{state}</div>
      <Button type="primary" onClick={addNumber}>
        +
      </Button>
      <Button type="primary" onClick={toIndex}>
        返回Index
      </Button>
    </div>
  )
}