初识react-hooks

什么是hook?

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

Effect Hook

你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。

说起副作用，首先我们要先了解函数组件跟类组件到底有什么不一样？

对于class组件，我们只需要实例化一次，实例中保存了组件的state等状态。对于每一次更新只需要调用render方法就可以。但是在function组件中，每一次更新都是一次新的函数执行,为了保存一些状态,执行一些副作用钩子,react-hooks应运而生，去帮助记录组件的状态，处理一些额外的副作用。

负责组件更新的useState

负责执行副作用useEffect

负责保存数据的useRef

负责缓存优化的useMemo

不能条件语句中，声明hooks，一旦在条件语句中声明hooks，在下一次函数组件更新，hooks链表结构，将会被破坏，current树的memoizedState缓存hooks信息，和当前workInProgress不一致，如果涉及到读取state等操作，就会发生异常

// 错误写法
let curRef = null 
if(isFisrt){ 
    curRef = useRef(null)
}