React Hooks useEffect的使用

          React Native+Taro+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