什么是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。文章来源：https://www.toymoban.com/news/detail-739260.html
import {useEffect}from 'react'
export default function useDomTitle(title){
useEffect(()=>{
document.title = title;
},[]);
return;
}
使用自定义Hooks时，在需要使用的组件中导入Hooks文章来源地址https://www.toymoban.com/news/detail-739260.html
import useDomTitle from './hooks/useDomTitle'
function APP(){
useDomTitle('hello');
return <></>
}
注意事项
- 减少useState的数量，使用较少的useState可以是Hooks的返回更容易，在组件中的实现更简单。
- 优先考虑可读性
- 合理拆分state对象中的内容
- 合理使用Hooks的返回值
- 合理拆分Hooks
到了这里，关于React Hooks ——性能优化Hooks的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
