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 <>
    {filterSex}
    
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

只有当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(e)} />
    
}
1
2
3
4
5
6
7
8
9
10

注意事项

• 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;
}
1
2
3
4
5
6
7

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

import useDomTitle from './hooks/useDomTitle'
function APP(){
    useDomTitle('hello');
	return <>
}
1
2
3
4
5

注意事项

• 减少useState的数量，使用较少的useState可以是Hooks的返回更容易，在组件中的实现更简单。
• 优先考虑可读性
• 合理拆分state对象中的内容
• 合理使用Hooks的返回值
• 合理拆分Hooks