React Hooks ——性能优化Hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

  1. 简洁
    从语法上来说，写的代码少了
  2. 上手非常简单
    • 基于函数式编程理念，只需要掌握一些JavaScript基础知识
    • 与生命周期相关的知识不用学，react Hooks使用全新的理念来管理组件的运作过程
    • 与HOC相关的知识不用学，React Hooks能够完美解决HOC想要解决的问题，并且更可靠
    • Mobx取代了Redux做状态管理
  3. 代码复用性更好
  4. 与Typescript结合更简单

React Hooks的缺点

  1. 状态不同步
    在异步操作的函数中访问的状态还是原来的状态的值
  2. useEffect依赖问题
    当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

  1. 命名规范
    自定义Hooks的命名一律使用use作为前缀，形如：useXXX
  2. 仅在最外层调用React Hooks
  3. 仅从react函数中调用react Hooks
    在自定义Hooks或者组件中调用Hooks
useMemo

useMemo主要是用来实现性能优化的目的。

useMemo(callback,array):

  • callback：回调函数，用于处理逻辑
  • array：array中包含需要监听的依赖，当依赖值发生变化时，重新执行callback。

useMemo()会返回一个函数称之为memoized。

import React,{useMemo,useState} from 'react'

const TestCom = React.memo(()=>{
    return <></>
});

function App(){
    const [user,setUser] = useState({
        name:'hello',
        userSex；1
    })
   const filterSex = useMemo(()=>{
        return user.userSex === 1 ? '男' : '女'
    },[user]);
    return <>
    <span>{filterSex}</span>
    <TestCom></TestCom>
    </>
}

只有当user触发更新的时候，才会重新触发filterSex内部的计算，这样就到达缓存性能优化的目的了。

注意事项
  • useMemo应该用于缓存函数组件中计算资源消耗较大的场景，因为useMemo本身就占用一定的缓存，在飞必要的场景下使用反而不利于性能的优化
  • 在处理量很小的情况下使用useMemo，可能会有额外的使用开销
useCallback

useCallback用于缓存一个函数，无论渲染多少次，函数都是同一个函数，这样可以减小不断创建新函数带来的性能和内存开销问题。

useCallback(callback,array)：

  • callback：函数，用于处理逻辑
  • array：控制useCallback重新执行的数组，array内state改变时才会重新执行useCallback
import {useCallback,useState} from 'react'
function App(){
    const [state,setState] = useState('');
    const input = useCallback((e)=>{
       setState(e.target.value); 
    },[]);
    return <>
    	<input onInput={(e)=>input(e)} />
    </>
}
注意事项
  • useCallback需要配合useMemo使用。这是因为React.memo方法会对props做浅层比较。如果props没有发生改变，则不会重新渲染。

自定义Hooks

自定义Hooks最重要的作用是逻辑复用，并非数据的复用，也不是UI的复用。

自定义Hooks就是声明一个函数，函数名根据命名规范以use作为开头，在函数内部可以使用任意内置Hooks。

import {useEffect}from 'react'
export default function useDomTitle(title){
    useEffect(()=>{
		document.title = title;        
    },[]);
    return;
}

使用自定义Hooks时，在需要使用的组件中导入Hooks

import useDomTitle from './hooks/useDomTitle'
function APP(){
    useDomTitle('hello');
	return <></>
}
注意事项
  • 减少useState的数量，使用较少的useState可以是Hooks的返回更容易，在组件中的实现更简单。
  • 优先考虑可读性
  • 合理拆分state对象中的内容
  • 合理使用Hooks的返回值
  • 合理拆分Hooks