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。

jsx 复制代码
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
jsx 复制代码
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。

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

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

jsx 复制代码
import useDomTitle from './hooks/useDomTitle'
function APP(){
    useDomTitle('hello');
	return <></>
}
注意事项
  • 减少useState的数量,使用较少的useState可以是Hooks的返回更容易,在组件中的实现更简单。
  • 有限考虑可读性
  • 合理拆分state对象中的内容
  • 合理使用Hooks的返回值
  • 合理拆分Hooks,不0
相关推荐
翻滚吧键盘1 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。20 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)40 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端