本篇内容介绍了“如何掌握Hooks”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
回想下你入门Hooks的过程,是不是经历过:
类比ClassComponent的生命周期,学习Hooks的执行时机
慢慢熟练以后,发现Hooks的执行时机和生命周期又有些不同。比如componentWillReceiveProps对应哪个Hooks?
感到困惑,去搜一些Hooks原理层面的文章阅读
作为一个API,不该简简单单、可可爱爱的照着文档调用就行么,Hooks为什么这么难?
React官方也发现了这个问题,在React要重写文档了讲到,React要基于Hooks重写文档。
本文主要包括2方面内容:
解释Hooks难学的原因
给出学习Hooks的建议
React的底层架构
可以用一个公式概括React:
const UI = fn(state);
视图可以看作状态经过函数的映射。
用户与界面的交互,可以看作这个公式的不断执行。
这个公式太精简了,没有解释state(状态)从哪儿来,我们扩展下:
const state = reconcile(update); const UI = fn(state);
鸿蒙官方战略合作共建——HarmonyOS技术社区
用户交互产生update(更新)
update经过reconcile步骤计算出当前应用的state
fn将state映射为视图变化(UI)
我们给fn起个名字:commit:
const state = reconcile(update); const UI = commit(state);
那么update在哪里产生呢?当然来自于用户交互,比如:点击事件。
所以React的底层架构可以简化为三步:
用户交互产生update
state = reconcile(update);
UI = commit(state);
了解了底层架构,我们再来看通过类比ClassComponent学习Hooks会带来的问题。
生命周期函数的抽象层级
我们已经有了完整的驱动视图更新的底层架构,开发者该怎么操作这套架构呢?
可以用计算机的抽象层级来类比:
高层:应用程序 中层:操作系统 底层:计算机组成架构
对应React:
高层:应用程序 ClassComponent生命周期 中层:操作系统 介入架构的API 底层:计算机组成架构 React底层架构
可以看到,生命周期函数属于抽象程度比较高的层次。这么设计也是为了让开发者更容易上手React。
设想一个Vue2开发者要转React技术栈,只需要类比Vue的生命周期来学习React的生命周期就行了。
这一切在Hooks到来前都没问题,然而......
Hooks的抽象层级
Hooks属于中等抽象层级。也就是说,Hooks直接介入底层架构的运行流程。
高层:应用程序 中层:操作系统 Hooks 底层:计算机组成架构 React底层架构
当我们用生命周期函数来类比Hooks时,其实是用高抽象层级的事物来描述低抽象层级的事物。
动物 --> 哺乳动物 --> 牛 --> 奶牛
对于一个只见过奶牛,再没见过其他动物的人,你怎么向他解释哺乳动物是啥?
正是由于抽象层级的不对称,造成通过生命周期函数类比学习Hooks会遇到问题。
该怎么学Hooks
既然Hooks属于中等抽象层,离底层很近,那么更好的学习方式是通过底层向上学习。
祭出我们的三步公式:
用户交互产生update
state = reconcile(update);
UI = commit(state);
对照公式,我们来讲解几个常见hook的工作流程:
useState
举个例子:
function App() { const [state, updateState] = useState(0); return <div onClick={() => updateState(state + 1)}></div>; }
useState返回值数组包含:
保存的state
改变state的方法updateState
对照公式,state属于公式步骤2计算得出的:
state = reconcile(update);
此时视图还没有更新。
用户点击div触发updateState,对应公式步骤1:
用户交互产生update
所以调用updateState能开启底层架构的三步运行流程。
当reconcile计算出state后就会进入第三步:
UI = commit(state);
最终渲染视图。
useEffect
举个例子:
useEffect(doSomething, [xx, yy])
useEffect的回调函数doSomething在第三步执行完成后异步调用:
UI = commit(state);
所以在doSomething函数内部能获取到完成更新的视图。
第二个参数[xx, yy]作为依赖项,决定了doSomething是否会被调用。
useLayout
Effect不同于useEffect在第三步执行完成后异步调用,useLayoutEffect会在第三步执行完UI操作后同步执行。
useRef
以上例子可以看到,useState与useEffect分别在三步流程的不同步骤被触发,他们的触发时机是确定的。
那么这三个步骤如何交流呢?通过useRef。
useState作用于第一、二步,useLayoutEffect作用于第三步,useEffect作用于第三步完成后。
使用useRef,就能达到在不同步骤间共享引用类型数据的目的。
可以看到,React为底层架构三步工作流程的每一步提供了对应的hook,同时提供了串联这三步工作流程的hook。
开发者只需要根据业务需要,通过基础Hooks组装出自定义hook,就能在底层架构运行流程的各个时期运行逻辑。
自底向上学习是本末倒置么?
有同学会反驳:之前学React得学生命周期函数的执行时机,现在学Hooks得学底层架构运行流程。难道不是本末倒置,更复杂了么?
其实不然。我问你几个问题:
componentWillReceiveProps为什么被标记为unsafe?
getDerivedStateFromProps用过么?
this.setState是同步还是异步的?
这些和生命周期函数相关的问题一点都不简单!很多用了几年React的前端不一定回答的上。
作为高层次抽象,生命周期函数隐藏了太多实现细节。同时React又太灵活,不像Vue通过模版语言限制了开发者的操作。
结果就是:不同React开发者写出各种奇奇怪怪的ClassComponent。
反观通过底层架构运行流程学习Hooks:
底层架构运行流程就是React的绝对真理,不会隐藏更多抽象
Hooks的写法规范限制了开发者的奇葩操作
这里唯一的问题,就是缺少一份从底层出发的文档。这也是官方要重写文档的初衷。
“如何掌握Hooks”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。