useEffect 是每次render之后就会调用的函数，可以代替之前的三个钩子

useEffect可以接受两个参数

案例

要想知道 +1操作这个app什么时候第一次渲染，可以使用useEffect,第二个参数必须是空数组，这样只在第一次调用时执行，第二三次不执行

//使用useEffect之前要先引入
import React, { useEffect,useState } from 'react'
import ReactDOM from 'react-dom'
function App(){
  const [n,setN] = useState(0);
  const add=()=>{
    setN(i=>i+1);
  };
  // 第一次渲染，只执行这一次，[]要在第二个参数
useEffect(()=>{
      console.log('这是第一次渲染执行这句话');
    },[]);
  return(
    <div>
      n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}
ReactDOM.render(<App />,document.getElementById('root'));

每次渲染都要执行,只要有一个数据变化了就执行，不用写第二个参数

useEffect(()=>{
      console.log('这是第一次渲染执行这句话');
    });

当某一个数据变化了就执行，例如当n变化了就执行

useEffect(()=>{
      console.log('n变化了');
    },[n])

使用useEffect是为了干什么呢？

当代码有副作用了,用于清除副作用，清除定时器等

对环境的改变即为副作用，如修改document.title，但我们不一定非要把副作用放在useEffect里

useLayoutEffect和useEffect的用法一样，但也有区别

• useEffect是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变DOM），当改变屏幕内容时可能会产生闪烁
  
• useLayoutEffect是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变DOM后渲染），不会产生闪烁

注意：

• useLayoutEffect总是比useEffect先执行
• useLayoutEffect里的任务最好影响了Layout
• 为了用户体验，优先使用useEffect（优先渲染)