React进阶-Hooks API

基础前提:类组件和函数式组件之间的区别。

自React16.8以后,几乎不用再编写类组件了,我们使用Hooks API可以模拟出类组件大多数的特性,比如state、生命周期、上下文、ref等等。

简介:是React16.8之后新增一套以use*开头的API。

作用:Hooks API的操作直达React底层,所以性能更好、效率更高、代码也更加简洁。

一、useState

语法:const [userInfo, setUserInfo] = useState('初始值')

关于语法为什么用“数组解析”而不是“对象解构”?

方便解构赋值??寄愣韵蠼夤购褪榻夤沟那?。

对第一个变量的说明:使用useState()定义的声明式变量,不能直接修改,要使用set*方法来修改。所以我们在定义state时,建议使用const这个关键字来定义。

对第二个变量的说明:解构出来的第二变量,其命名要求满足 set*格式,比如setUserInfo,这个set*是专门用于更新useInfo的。当set*方法调用时,当前函数式组件(整个函数)重新执行,返回新的JSX,进而执行协调运算(找出脏节点),最后提交更新DOM。

注意:在使用set*方法时,也要考虑新值与旧值的关系。当新值与旧值无关时,直接set*赋值;当新值与旧值有关时,用旧参与运算返回新值。

注意:React Hooks不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序。

二、useEffect

在这里我们称之为“副作用”。那什么是“副作用”?

那些影响当前函数式组件运行效率的功能,比如DOM操作、BOM操作、定时器、调接口等等。

两类副作用

第一类是需要清除的副作用,比如定时器、长连接、缓存

语法:useEffect(()=>{ return ()=>{清除副作用}}, [])

另一类是不需要清除的副作用,比如DOM操作、BOM操作等。

语法:useEffect(()=>{}, [])

两个参数

第一个参数是函数,这个函数体中的代码相当于componentDidMount()的功能,这个函数还有一个返回值(要求返回一个函数),这个被返回的函数相当于componentWillUnmount()

第二参数是响应式依赖,相当于componentDidUpdate()。当有“风吹草动”时(set*被调用时):

1、如果当前useEffect没有第二个参数,当前useEffect会重新重新。

2、如果当前useEffect有第二个参数并且是空数组[],当前useEffect只执行一次。

3、如果当前useEffect有第二个参数并且是['响应式变量'],当响应式变量发生变化时当前useEffect再次执行。

useEffect的使用原则:

1、一个useEffect只做一件事(副作用),建议不要在同一个useEffect中同时做多个副作用,这会产生莫名其妙的bug。

2、在使用useEffect时,一定要关注这个副作用是否需要清除,注意语法。

3、useEffect的第二个参数有三种写法,不同写法时useEffect的工作流程是完全不同的。

useEffect的三种工作流程:

1、当没有第二个参数时【useEffect(()=>{fn1();return fn2})】,初始化时fn1执行、fn2不执行;当set*调用时,先执行fn2,再执行fn1。当组件被路由销毁时,fn2执行。

2、当第二个参数是空数组时【useEffect(()=>{fn1();return fn2}, [])】,初始化时fn1执行、fn2不执行;当set*调用时,fn2和fn1都不执行。当组件被路由销毁时,fn2执行。

3、当第二个参数是“响应式依赖”的数据时【useEffect(()=>{fn1();return fn2}, [a,b,...])】,初始化时fn1执行、fn2不执行;当“响应式依赖”被set*改变时,先执行fn2,再执行fn1。当组件被路由销毁时,fn2执行。

三、useContext

语法:const theme = useContext(ThemeContext)

四、useRef

作用:访问DOM元素,进行DOM操作

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数

五、useMemo

语法:const computedValue = useMemo(computeExpensiveValue, [依赖数组])

理解:这玩意儿就是计算属性,具有缓存功能。当我们在函数式组件中需要处理Expensive的运算时,我们使用useMemo()来做优化。避免无关的“风吹草动”导致我重新计算。

注意:useMemo() 的第二个参数,不能省,必须手动收集依赖。据说未来无须手动收集依赖了。

六、useCallback

语法:const memoFn = useCallback(fn, [依赖数据])

理解:这玩意儿用于缓存一个函数声明。避免每次风吹草动时函数重新被声明。

注意:useCallback() 的第二个参数,一般用空数组,避免重新声明。

七、自定义Hooks

1、Hooks只能在顶部使用,不能在循环、函数调用中使用。

2、Hooks只能在函数式组件、自定义Hooks中使用。

3、自定义Hooks必须以use*,在自定义的Hooks还可以调用其它的Hooks。

4、自定义的Hooks,本质上就是一个函数封装。

5、自定义Hooks是一种逻辑复用技巧,自定义Hooks是完全独立的,互不干扰。

八、如何深入实践React Hooks编程?

1、反复研究React Hooks官方文档以及背后的参考文献。(理论)

2、反复实战使用react-use这个库。(开发)

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容