React-hooks中的useEffect使用步骤

import {useState, useEffect} from 'react';
function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("触发副作用");
		document.title = `点击了${count}次`;
	});
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>点击{count}次</button>
		</div>
	)
}

function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("触发副作用");
		document.title = `点击了${count}次`;
	}, []); // 注意这里，传入 []
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>点击{count}次</button>
		</div>
	)
}

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('李白');
  useEffect(() => {
    console.log('触发渲染')
    document.title = `clicked ${count} times`;
    console.log('name: ', {name});
  },[count]) // 这里我们传入 count，不传name
  return (
    <>
      <p>当前次数：{count}</p>
      <p><button onClick={() => setCount(count + 1)}>累计</button></p>
      <p><button onClick={() => setName("杜甫")}>改名{name}</button></p>
    </>
  )
}

useEffect(() => {
	console.log('副作用函数执行');
	return () => {
		console.log('清理副作用的函数执行');
		// 这里执行 清理副作用的代码
	}
})

function Test() {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('this is effect');
    }, 1000)
    // 这里return 一个回调函数，在函数中清除副作用
    return () => {
      clearInterval(timer);
    }
  })
  return (
    <div>Test</div>
  )
}
function App() {
  const [flag, setFlag] = useState(true);
  return (
    <div>
      {flag ? <Test/> : null}
      <div>
        <button onClick={() => setFlag(!flag)}>点击</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()
}, []) // 仅组件初始化时调用