react rsf函数式组件 useEffect实现组件的生命周期

vlambda
2022-03-15

react rsf函数式组件 useEffect实现组件的生命周期

第二个Hook useEffect

第一个参数是回调函数

第二个参数是数组，想要监控哪个数据更新，就把哪个变量填到数组中；

使用技巧

如果要监控页面上所有的变量更新，要么把所有的变量都填到数组里，或者不要写第二个参数，即不要在useEffect里写数组这个参数
如果不想监控任何一个变量，可以通过填一个空数组来实现
变量的声明必须写在useEffect之前
useEffect函数可以写多个；
函数式组件离不开hook，没有hook，函数式组件就没有多大意义了；

监控所有数据或者某一个数据或者不监控任何一个数据

  let [num,setNum] = useState(0); let [num2,setNum2] = useState(0);  useEffect(()=>{ //一般在这里做ajax的请求，向后台请求数据； console.log("组件创建完成") //},[num,num2]); //把所有的变量都列出来，任一个变量变化都会触发useEffect； //}); //不写第二个参数，任一个变量变化都会触发useEffect； //},[num]); //把所有的变量都列出来，只有num这个变量变化了，才会触发useEffect    },[]); //不监控组件里的任何一个变量，只在组件第一次加载时触发

实现 vue beforeDestory的效果，在组件销毁前调用

import {useState,useEffect} from 'react';//useEffect 在组件创建时 执行
//类组件的生命周期// vue的生命周期 mount 相当于vue created 做数据请求 》 updated 》 beforeDestroy 卸载前做垃圾回收
function UseEffect01(props) {
 let [num,setNum] = useState(0); let [num2,setNum2] = useState(0); useEffect(()=>{ //一般在这里做ajax的请求，向后台请求数据； console.log("组件创建完成") //},[num,num2]); //把所有的变量都列出来，任一个变量变化都会触发useEffect； //}); //不写第二个参数，任一个变量变化都会触发useEffect； },[num]); //把所有的变量都列出来，只有num这个变量变化了，才会触发useEffect //},[]); //不监控组件里的任何一个变量，
 useEffect(()=>{ /** * 在这个阶段做垃圾回收，数据还原等操作，比如组件初始化时，某个变量是100，在组件使用过程中，对这个数据进行了修改，需求要让组件在销毁前将该数据还原， * 可以在此操作  */ return () => { console.log("组件销毁前调用"); } });

 const fnUpdateNum = () => { setNum(num+=1); } const fnUpdateNum2 = () => { setNum2(num2+=1); }
 return ( <> <h1>{num}</h1> <button onClick={fnUpdateNum}>fnUpdateNum</button> <br/> <h1>{num}</h1> <button onClick={fnUpdateNum2}>fnUpdateNum2</button> <hr/>
 </> );}
export default UseEffect01;

在入口文件里写一个定时器，3秒后将组件替换，实现组件的销毁，看useEffect有没有变化；

import ReactDom from "react-dom"import App from './UseEffect01'
ReactDom.render( <App />, document.getElementById('root'))
setTimeout(()=>{ ReactDom.render( <input type="text" />, document.getElementById('root') )},3000); //设置一个定时器，三秒后，将App替换成input