React引入Hooks的原因：

• 在不改变组件层次结构的情况下重用状态逻辑：使用Hooks，我们可以从组件中中提取状态逻辑，以便在需要时独立测试和重用。这使得在许多组件之间或与团队中的其他人共享Hooks变得很容易。
• 将一个组件拆分为更小的函数：Hooks还使编写生命周期方法比以往任何时候都更容易。它的每一个生命周期方法通常都包含一组不相关的逻辑。

useEffect

• 接受用于执行任何副作用的函数；
• 使用方式：useEffect(effectFunction，arrayDependencies)
• 传递给useEffect的函数将在渲染提交到屏幕后运行。这些效果在渲染完成后运行，但我们也可以根据某些值的变化来激发他们。
• 一般是在useEffect当做mount函数，用来获取后端的数据：

     useEffect(()=>{
     Axios.get(''my-api/user/username)
    .then(response=>{
        //do Something......
    })
    },[])
    //换种写法就是
    useEffect(()=>{
      const getData = async ()=>{
        const res = await queryData()
        //do Something......
    }
    getData()
    },[])

• UseEffect可以替代生命周期函数：ComponentDidMount，ComponentDidUpdate，componentWillUnmount
• useEffect具有清理作用，我们必须在一段时间后清除效果，这通常是通过从传递给useEffect的效果函数中返回一个函数来完成的

useEffect(()=>{
const subscription = props.source.subscribe();
return ()=>{
    subscription.unsubscribe()
}
})

• 创建多个效果：要添加多个效果，我们可以在一个函数组件中有多个useEfect调用；

useEffect(()=>{
    const clicked = ()=>console.log('window clicked')
    window.addEventListener('click',clicked)
    
    return ()=>{
        window.removeEventListener('click',clicked)
    }
},[])

• 跳过效果的多种方法：可以跳过useEffect的调用，而不是在每次渲染的时候调用它。这可以使用多种方式实现：
  • 使用数组依赖；在依赖数组变化的时候，效果函数将被调用
  • 使用空数组依赖。只有在挂载时才调用effect函数；
  • 不使用数组依赖。效果函数将在每次渲染后运行：

useEffect与useMount

• useEffect空数组依赖的弊端
  • 严格模式下，不是只执行一次，而是两次
  • 执行两次的情况，比如在获取auth认证，令牌或者token时，短时间内服务端不支持给两个不同的请求都发放认证，而是两个都报错
  • 空数组依赖的useEffect内，定时器或者处理监听回调的事件代码会获取不到最新的值。
• useMount（挂载之后）：与componentDidMount用法相同；无参回调函数；一般使用场景有
  • 添加事件监听、订阅事件
  • 添加定时器
  • 发送请求、初始化组件数据
  • 获取元素的尺寸和位置