React函数组件通过副作用函数useEffect实现生命周期
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState, useCallback, useContext} from 'react'
import Home from './pages/home'
import './App.css';
function App() {
const [msg, setMsg] = useState<string>();
const [title, setTitle] = useState<string>('默认标题');
const childMessage = (msg:string) => {
setMsg(msg)
};
// 实现update
useEffect(() => {
console.log('全局state变化了就执行');
})
// 实现didMount
useEffect(() => {
console.log('页面加载完只执行一次');
}, [])
// 依赖msg变化执行
useEffect(() => {
console.log('依赖于msg,msg变化了就执行');
}, [msg])
return (
<div className="App">
<p>来自子组件的参数: { msg }</p>
<p>Title { title }</p>
<button onClick={ () => {setTitle('标题变化了')} }>测试非msg变化</button>
<Home childMessage={childMessage}/>
</div>
);
}
export default App;
补充 组件销毁时执行
useEffect(() => {
return () => {
console.log('组件卸载就执行')
};
})