(1)需求最近在学习React，学习了ReactHook，做了useEffectDemo。(2)简介为了避免整体重新渲染消耗性能，当你只想渲染其中的一部分时使用useEffect。useEffect专门用来处理sideeffectcomponentDidMount同理，合并到API.const[reset,setReset]=useState(100)useEffect(()=>{//clearthedataconsolebeforereturnafunctiontoclear数据.log('clearuseEffectdata',reset);setTimeout(()=>{setNum(()=>{returnnum+100});console.log('useEffectsetNum',num);},1000)//模拟Ajax请求},[reset])//需要有监听值，否则会报错(3)CompleteDemo/**@Author:ArdenZhao*@Date:2022-04-1510:33:48*@LastEditTime:2022-04-1511:26:59*@FilePath:/react-ts/src/components/react/8-Hook-useEffect.js*@Description:文件信息*/importReact,{useState,useEffect}from'react';import{Button}from'antd';import"antd/dist/antd.css";functionHookUseEffect(props){//useState不能放在函数内部，这里设置初始值为0const[num,setNum]=useState(0);const[obj,setObj]=useState({a:1});const[refresh,setRefresh]=useState(100)constclickX=()=>{setNum(num+1);}useEffect(()=>{console.log('初始化useE效果'，刷新）；//设置数(数+1);//在外面一直执行，在里面不执行一半//模拟Ajax请求setTimeout(()=>{setNum(()=>{returnnum+10});},1000)//return()=>{//不需要//console.log('useEffectreturn');//}},[refresh])//需要有监听值，否则不会报错const[reset,setReset]=useState(100)useEffect(()=>{//返回函数之前清空数据清除数据console.log('clearuseEffectdata',reset);setTimeout(()=>{setNum(()=>{returnnum+100});console.log('useEffectsetNum',num);},1000)//模拟Ajax请求},[reset])//需要有监听的值，否则会报错return(
Learn,{props.name}
1.基本用法：{num}
2.清除数据位置：{num}-{reset}