Reac Hooks

React Hooks

简介

什么是Hooks

Hooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特新（比如状态管理，生命周期），就用钩子把外部特性“钩”进来，通常函数名都是以use开头。首次在v16.7.0-alpha版本中添加，在v16.8.0中正式发布。

Hooks产生的背景

• 跨组件复用stateful logic十分困难 使用Hooks，你可以在将含有
• state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。
• 复杂的组件难以理解 Hooks允许您根据相关部分（例如设置订阅或获取数据）将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割
• 不止使用户，机器也对Classes难以理解Hooks让你可以在classes之外使用更多的React的新特性

常用Hooks

• useState

let [count, setCount] = useState(100);

• useEffect

useEffect(()=>{
    return ()=>{}
}, [])

• useLayoutEffect
  • useEffect在全部渲染完毕后才会执行
  • useLayoutEffect 会在浏览器layout之后，painting之前执行
  • 其函数签名与useEffect 相同，但它会在所有的DOM变更之后同步调用effect
  • 可以使用它来读取DOM 布局并同步触发渲染
  • 在浏览器执行绘制之前 useLayoutEffect内部的更新计划将被同步刷新
  • 会阻塞页面的渲染，如果在里面执行耗时任务的话，页面就会卡顿
  • useContext 直接获取祖先元素通过createContext创建的context
  • useReducer

const [state, dispatch] = useReducer(reducer, initialState, init);

• memo
• useMemo
• useCallback
• memo，useMemo和useCallback在优化组件的应用场景
  • 在子组件不需要父组件值和函数的情况下，使用memo包裹即可
  • 如果是函数作为props，可以使用useCallback保证不会反复修改
  • 如果是值作为props，可以使用useMemo保证值不会反复修改
• useRef
  不符合 captrue values，本身不会变化
• useImperativeHandle
  配合forwardRef使用，用于自定义通过ref给父组件暴露的值
• useDebugValue
  用于开发者工具调试

封装自定义

封装hooks获取窗口大小

// useWinSize
import React, { useState ,useEffect ,useCallback } from 'react';

export default function useWinSize(){
    const [ size , setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })
 
    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[])

    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])
 
    return size;
}

// demo.js
import useWinSize from './useWinSize'

export default function(){
    const size = useWinSize()
    return (
        <div>页面Size:{size.width}x{size.height}</div>
    )
}

延迟设置值

import React, {useState, useRef, useEffect} from 'react'

export const useDelayState = (initialState)=>{
    const [state, setState] = useState(initialState);
    const ref = useRef();
    const delaySetState = (value, delay)=>{
        ref.current = setTimeout(()=>{
            setState(value)
        }, delay)
    }
    useEffect(()=>{
        return ()=>{
            clearTimeout(ref.current)
        }
    }, [])
    return [state, delaySetState, setState]
}

GeoLocation获取地理定位

import { useEffect, useState } from 'react';

const useGeolocation = options => {
  const [state, setState] = useState({
    loading: true,
    accuracy: null,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: null,
    longitude: null,
    speed: null,
    timestamp: Date.now(),
  });
  let mounted = true;
  let watchId: any;

  const onEvent = event => {
    if (mounted) {
      setState({
        loading: false,
        accuracy: event.coords.accuracy,
        altitude: event.coords.altitude,
        altitudeAccuracy: event.coords.altitudeAccuracy,
        heading: event.coords.heading,
        latitude: event.coords.latitude,
        longitude: event.coords.longitude,
        speed: event.coords.speed,
        timestamp: event.timestamp,
      });
    }
  };
  const onEventError = (error) =>
    mounted && setState(oldState => ({ ...oldState, loading: false, error }));

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(onEvent, onEventError, options);
    watchId = navigator.geolocation.watchPosition(onEvent, onEventError, options);

    return () => {
      mounted = false;
      navigator.geolocation.clearWatch(watchId);
    };
  }, []);

  return state;
};
export default useGeolocation;

参考文档

Hooks的使用注意事项

• 只能在顶层调用Hooks？

Hooks是使用数组或单链表串联起来的，Hooks顺序修改会打乱执行结果

• useState在多个组件中引入，彼此之间会不会有影响？

在React中Hooks把数据存在fiber node上的，每个组件都有自己的currentlyRenderingFiber.menmoizedState

Hooks的问题

• Hooks能解决组件状态的复用问题，但没有很好的解决JSX复用问题
• React Hooks模糊了生命周期的概念，但也带来了更高门槛的学习（Hooks生命周期的理解、Hooks Rules的理解、useEffect依赖项的判断等）
• 类拥有比函数更丰富的表达能力（OOP），Function Component容易是代码逻辑混乱

Hooks的原理

• 单向链表通过next把hooks串联起来
• memoizedState存在fiber node上，组件之间不会相互影响
• useState和useReducer中通过dispatchAction调度更新任务

React Fiber介绍

触发React重新渲染

• ReactDOM.render
• setState
• forceUpdate
• React Hooks的dispatchAction

重新渲染机制

React框架内部运作可以分为3层：

• Virtual DOM层，描述页面长什么样
• Reconciler层负责调用组件生命周期方法，进行Diff运算
• Renderer层，根据不同平台，渲染出相应的页面，比较常见的是ReactNative

React 16.0前后Reconciler层的改动：

• 之前：React会遍历应用的所有节点，计算出差异，然后再更新UI，整个过程不能被打断，一旦用的时机超过16毫秒，就容易出现掉帧的现象
• 之后：引入Fiber Reconciler，依赖requestldleCallback把调和过程分成两个阶段：

  阶段一，生成 Fiber 树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断
  阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断

图解两者的区别

stack reconciler

fiber reconciler

Fiber Reconciler 在阶段一进行Diff 计算的时候，会生成一棵 Fiber 树。这棵树是在 Virtual DOM 树的基础上增加额外的信息来生成的（hooks依赖的memoizedState链表），它本质来说是一个链表。

延展思考

React Hooks与Vue Composition API有异曲同工之处

转载链接