React Hooks ——性能优化Hooks
什么是Hooks
Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。
React Hooks的优点
- 简洁
从语法上来说，写的代码少了 - 上手非常简单
- 基于函数式编程理念，只需要掌握一些JavaScript基础知识
- 与生命周期相关的知识不用学，react Hooks使用全新的理念来管理组件的运作过程
- 与HOC相关的知识不用学，React Hooks能够完美解决HOC想要解决的问题，并且更可靠
- Mobx取代了Redux做状态管理
- 代码复用性更好
- 与Typescript结合更简单
React Hooks的缺点
- 状态不同步
在异步操作的函数中访问的状态还是原来的状态的值 - useEffect依赖问题
当useEffect依赖的数据变多后会导致频繁触发
React Hooks的注意事项
- 命名规范
自定义Hooks的命名一律使用use作为前缀，形如：useXXX - 仅在最外层调用React Hooks
- 仅从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，不0