简易总结react-hook三大进阶

2020-05-06 15:05:21 阅读：406 来源： 互联网

标签：test1 const 进阶 useMemo useReducer useCallback react hook test4

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>

标签：test1,const,进阶,useMemo,useReducer,useCallback,react,hook,test4
来源： https://www.cnblogs.com/huangqiming/p/12836376.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简易总结react-hook三大进阶