什么是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

  1. useEffect 在全部渲染完毕后才会执行
  2. useLayoutEffect 会在 浏览器 layout 之后,painting 之前执行
  3. 其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect
  4. 可以使用它来读取 DOM 布局并同步触发重渲染
  5. 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
  6. 会阻塞页面的渲染,如果在里面执行耗时任务的话,页面就会卡顿

useContext 直接获取祖先元素通过createContext创建的context

  • useReducer
const [state, dispatch] = useReducer(reducer, initialState, init);
  • memo
  • useMemo
  • useCallback
//memo,useMemo和useCallback在优化组件的应用场景
1.在子组件不需要父组件值和函数的情况下,使用memo包裹即可
2.如果是函数作为props,可以使用useCallback保证不会反复修改
3.如果是值作为props,可以使用useMemo保证值不会反复修改
  • useRef
不符合capture values,本身不会变化,存储的.current会变化
  • useImperativeHandle
配合forwardRef使用,用于自定义通过ref给父组件暴露的值
  • useDebugValue
用于开发者工具调试

封装自定义Hooks

1.封装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>
    )
}

2.延迟设置值

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]
}

3.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;
  • 10
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值