react的useEffect Hook的应用

import { useState, useEffect } from 'react';
/*  
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作

useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
*/

export default function Hooks() {
  const [count, setCount] = useState(0);
  const [str, setStr] = useState('hahh');

  //更新也会执行
  console.log('初始化', count);

  //模拟componentDidMount周期执行 只会执行一次 加参数[]
  useEffect(() => {
    console.log('哈哈哈', count);
  }, []);

  //模拟componentDidUpdate 周期执行 每次更新都会执行
  // useEffect每次更新前都会清理一下，也就是线执行return回调的内容
  useEffect(() => {
    console.log('componentDidUpdate更新执行', count);

    //模拟componentWillUnmount
    //componentWillUnmount在类型组件中在卸载前执行一次
    //在hook中每次更新前就会执行一次 解决之前内存泄漏bug
    return () => {
      console.log('清空一下');
    };
  });

  /*  
    useEffect 只监听某个state变化才会执行 相当于监听 起到性能优化作用
    对比class组建中通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决
    componentDidUpdate(prevProps, prevState) {
        if (prevState.count !== this.state.count) {
            document.title = `You clicked ${this.state.count} times`;
        }
    }
    */
  useEffect(() => {
    console.log('count更新了');
  }, [count]);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>计算</button>

      <p>{str}</p>
      <button onClick={() => setStr(str + count)}>改变字符串值</button>
    </>
  );
}