import {useState, useEffect} from 'react';
function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("觸發(fā)副作用");
		document.title = `點(diǎn)擊了${count}次`;
	});
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
		</div>
	)
}

function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("觸發(fā)副作用");
		document.title = `點(diǎn)擊了${count}次`;
	}, []); // 注意這里，傳入 []
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
		</div>
	)
}

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('李白');
  useEffect(() => {
    console.log('觸發(fā)渲染')
    document.title = `clicked ${count} times`;
    console.log('name: ', {name});
  },[count]) // 這里我們傳入 count，不傳name
  return (
    <>
      <p>當(dāng)前次數(shù)：{count}</p>
      <p><button onClick={() => setCount(count + 1)}>累計(jì)</button></p>
      <p><button onClick={() => setName("杜甫")}>改名{name}</button></p>
    </>
  )
}

useEffect(() => {
	console.log('副作用函數(shù)執(zhí)行');
	return () => {
		console.log('清理副作用的函數(shù)執(zhí)行');
		// 這里執(zhí)行 清理副作用的代碼
	}
})

function Test() {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('this is effect');
    }, 1000)
    // 這里return 一個(gè)回調(diào)函數(shù)，在函數(shù)中清除副作用
    return () => {
      clearInterval(timer);
    }
  })
  return (
    <div>Test</div>
  )
}
function App() {
  const [flag, setFlag] = useState(true);
  return (
    <div>
      {flag ? <Test/> : null}
      <div>
        <button onClick={() => setFlag(!flag)}>點(diǎn)擊</button>
      </div>
    </div>
  )
}

useEffect(async () => {
	const res = await getData('url');
	console.log(res);
})

useEffect(() => {
	async function initData() {
		const res = await getData('url');
		console.log(res);
	}
	initData()
}, []) // 僅組件初始化時(shí)調(diào)用