useEffect与useLayoutEffect

useEffect与useLayoutEffect

React Hook让无狀态组件拥有了许多只有有狀态组件的能力，如自更新能力（setState，使用useState），访问ref（使用useRef或useImperativeMethods），访问context(使用useContext)，使用更高级的setState设置（useReducer），及进行类似生命周期的阶段性方法（useEffect或useLayoutEffect）。

当然还有一些Hook，带来了一些新功能，如useCallback，这是对事件句柄进行缓存，useState的第二个返回值是dispatch，但是每次都是返回新的，使用useCallback，可以让它使用上次的函数。在虚拟DOM更新过程中，如果事件句柄相同，那么就不用每次都进行removeEventListner与addEventListner。最后就是useMemo，取得上次缓存的数据，它可以说是useCallback的另一种形式。

useState： setState
useReducer： setState
useRef: ref
useImperativeMethods: ref
useContext: context
useCallback: 可以对setState的优化
useMemo: useCallback的变形
useLayoutEffect: 类似componentDidMount/Update, componentWillUnmount
useEffect: 类似于setState(state, cb)中的cb，总是在整个更新周期的最后才执行

 

从上面的描述来看useEffect的时期是非常晚，可以保证页面是稳定下来再做事情。但是useEffect与useLayoutEffect与有狀态组件的生命周期钩子又有一点不一样。

useEffect(function(){
  //dosomething
  return function(){
  //dosomething     
  }
 }, inputs)

useEffect与useLayoutEffect的第一个参数是一个函数（初始函数）