hooks手记(一)：useState useEffect us

useState 给函数组件添加状态

用法：接收一个参数作为初始值，返回一个数组

import react, { useState } from 'react'
const [num, setNum] = useState(0)
// => [变量，修改变量的函数] = useState(初始值: 0)

useEffect 给没有生命周期的组件，添加渲染结束的信号，在render之后执行，相当于生命周期中的componentDidMount componentDidUpdate

用法：

有两个参数：

• 第一个参数是一个函数，第二个参 数是 依赖列表，只有依赖更新才会执行函数；
• 返回一个函数，先执行返回函数，再执行参数函数

import react, { useEffect } from 'react'
useEffect(()=>{
  //先执行返回函数，再执行参数函数
    console.log("2")
    return () => {
    console.log("1")  
  }
},[]) // 数组为空，表示不依赖任何状态，只更新一次

useLayoutEffect 用法与useEffect相同，区别在于useLayoutEffect 会比 useEffect 先执行，它相当于生命周期中的componentWillMount

useEffect 和 useLayoutEffect区别：
在处理DOM的时候,在useEffect里面处理DOM,并且会改变页面的样式,可能会出现出现闪屏问题, 可以用useLayoutEffec，useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,但是会阻塞浏览器的绘制。