首页 > 其他 > 详细

简易总结react-hook三大进阶

时间:2020-05-06 16:00:50      阅读:48      评论:0      收藏:0      [点我收藏+]

react-hook最重要的三大进阶

import { useCallback, useMemo, useReducer } from "react"

1、每个的一句话简单总结

useCallback    // 限制函数每次都刷新的方法,优化性能等
useMemo    // 限制参数每次都刷新的方法,优化性能等
useReducer    // 自定义方法的创建值和修改值

2、useCallback(函数相关)

const test = useCallback(() => {
     return (
         <React.Fragment>
             {test2 + test1}
         </React.Fragment>
     )
}, [test1])  // 只有在test1发生变化的时候才真正发生变化

2 useMemo(参数相关)

const test3 = useMemo(() => {
     return test1 + test2
}, [test1])   // 只有在test1发生变化的时候才真正发生变化

3、useReducer

//  首先定义内置方法         
const test4 = (n: number, p: number) => {
    return n + p
}

// 10是初始值,代表test4里的p参数   
const [num, fun] = useReducer(test4, 10)

// 调用
<div onClick={() => { fun(5) }}>
    {num}
</div>

  

简易总结react-hook三大进阶

原文:https://www.cnblogs.com/huangqiming/p/12836376.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!