React Hooks useEffect的使用

秋秋小事2025-08-26 2:37
React Native+Taro+Typescript环境下：
TypeScript 复制代码
import React, { useState, useEffect } from 'react'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'

const FlowersCard = ()=>{
  const [flowerName, setFlowerName] = useState('')
  const [flowerColor, setFlowerColor] = useState('')
  // 叶片个数
  const [bladeNum, setBladeNum] = useState(0)

  // 1. 无依赖 - 每次渲染后都执行
  useEffect(() => {
    console.log('组件渲染完成或组件更新后都会执行!')
  })

  // 2. 空依赖数组 - 仅在组件挂载时执行一次
  useEffect(() => {
    console.log('组件已挂载')
    
    // 模拟API调用
    const fetchFlowers = async () => {
      try {
        // 展示Loading并进行网络请求
        // 进行网络请求并获取页面中需要的数据
        setFlowerName(()=>'海棠')
        setFlowerColor(()=>'pink')
        setBladeNum(()=>50)
      } catch (error) {
        // 在这里隐藏Loading
      } finally {
        // 在这里隐藏Loading
      }
    }
    fetchFlowers()
    // 清理函数 - 组件卸载时执行
    return () => {
      console.log('组件即将卸载')
    }
  }, [])

  // 3. 有依赖项 - 当依赖项变化时执行
  useEffect(()=>{
    console.log("叶片的数量增加时，即bladeNum值改变时会触发这个函数的调用")
  }, [bladeNum])

  const addBladeNumber = ()=>{
    setBladeNum((preNum)=>{
      return preNum + 2
    })
  }

  return <View className='container'>
    <Text className='txt'>Flower Name is {flowerName}</Text>
    <Text className='txt'>Flower Color is {flowerColor}</Text>
    <Text className='txt'>flower Blade is {bladeNum}</Text>
    <Button className='btn' onClick={addBladeNumber}>增加叶片数量</Button>
  </View>
}

export default FlowersCard