最近终于是下定决心将我负责的一个公司内部系统由react v15.4.1升级到v16.8.6。v16.8.6中最被推崇的一个特性应该就是react hook了,实际上手后为能更顺手的使用也是花了2个多小时的时间把react hook的实现源码看了一遍。
useState
一,探索版本
一个函数式组件
const FunctionComponent = () => {
return (
<div>hello functional component</div>
)
}
要在这个组件中触发更新要怎么做,下面我们就做点努力,改造一下。
改造1
// 下面的实现中click事件被触发然后执行sayHello对say赋值hello,
// 这个过程并没有触发react的更新机制,所以页面不会显示hello
const FunctionComponent = () => {
let say = 'hello functional component'
const sayHello = () => {
say = 'hello'
}
return (
<>
<div>{say}</div>
<button onClick={sayHello}>say hello</button>
</>
)
}
改造2
在1中我们已经改变了say的值,现在我只需想办法触发react的更新就可以了。如何手动触发react的更新,我想到了forceUpdate
// 需要将say作为一个FunctionComponent的外部变量
// 避免在更新触发后函数式组件执行对say重新赋值
let say = 'hello functional component'
const FunctionComponent = props => {
const sayHello = () => {
// 改变状态
say = 'hello'
// 手动触发父组件的更新从而更新自己
props.update()
}
return (
<>
<div>{say}</div>
<button onClick={sayHello}>say hello</button>
</>
)
}
class Stage extends React.Component {
// 通过触发父组件的更新来更新函数式组件
// update属性用于触发更新函数式组件
handleUpdate = () => {
this.forceUpdate()
}
render() {
return (
<div className="App">
<FunctionComponent update={this.handleUpdate} />
</div>
);
}
}
到此我们已经达到了使用functional组件实现类似class组件更新机制的目的。
通过上面的探索在不借助useState的情况我们也能实现functional组件的状态更新。
问题是我们每次都得手动调用forceUpdate(),不够友好。而且很容易相信这个方式性能极低。
二,useState版本:
在整个hook的使用中有两个对象你不能忽视(具体区别请查看源码):
- HooksDispatcherOnMountInDEV —— functional组件在首次调用是使用
- HooksDispatcherOnUpdateInDEV —— functional组件在更新时调用
使用示例
const [count, setCount] = useState(0)
1,useState(0)发生了什么
每次执行useState都会生成一个hook对象
var hook = {
memoizedState: 传入的初时值,如果useState接收的是函数则是函数执行的结果,
baseState: null,
queue: 保存对state的更新队列,
baseUpdate: null,
next: null
};
在一个functional组件中调用多少次useState()
则会新建多少个hook对象,为了维护这些hook对象react使用了一个WorkInProgressHook的链表保存——这一步处理你可以理解成我们在探索版本中将functional组件的状态变量say做全局处理相同的目的
2,返回了什么count = ?、setCount = ?
var queue = hook.queue = {
last: null,
dispatch: null,
lastRenderedReducer: reducer,
lastRenderedState: initialState
};
var dispatch = queue.dispatch = dispatchAction.bind(null,
currentlyRenderingFiber$1, queue);
return [hook.memoizedState, dispatch];
- hook.memoizedState —— 其实就是我们探索版本中的say只不过我们是通过
window.say
保存,而它通过之前创建的WorkInProgressHook.hook
保存 - dispatch —— 其实也就是我们探索版本中的
props.update
,探索版本中我们使用forceUpdate
更新父组件的方式来触发更新,而它采用了一个更底层的方法scheduleWork
。不知道scheduleWork
?请参考我之前的react fiber简单了解下
总结:
functional组件有两个特性注定他不能拥有状态:
1,一个纯函数每次调用都是全新的东西。要破坏这种特性就需要让这个函数产生副总用——依赖全局变量(window.say、WorkInProgressHook.hook)。
2,之前版本中react官方提供setState
用于改变状态触发更新,但这个只存在与class组件,新版本的dispatch
给了我们多一个选择
小知识点:functional组件执行过程中生成的WorkInProgressHook
最终会保存到当前组件对应fiber对象上
// WorkInProgressHook是一个链表结构
// firstWorkInProgressHook表示这个链表头部指针
var renderedWork = currentlyRenderingFiber$1;
renderedWork.memoizedState = firstWorkInProgressHook;
useEffect
当你认真看完前面useState
的实现过程,你会发现这样一个过程:
- 生成hook
- 用WorkInProgressHook链表保存
- 最终将WorkInProgressHook保存为当前fiber的memoizedState
如果你对react的fiber有一定了解的话对memoizedState一定不会陌生,我们在class组件中的state最终也是保存到fiber的memoizedState
手动分割线—————————————–
useEffect发生了什么
- 生成effect
var effect = {
tag: tag,
create: useEffect的第一个参数传入的函数,
destroy: destroy,
deps: useEffect的第二个参数更新依赖,
// Circular
next: null
};
- 用componentUpdateQueue链表保存
- 最终将componentUpdateQueue保存为当前fiber的updateQueue,
ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
renderedWork.updateQueue = componentUpdateQueue;
如果你对fiber的调用过程一定了解的话updateQueue你也不会陌生,这个地方存有react diff出来的副作用,用于在commit阶段执行。
总结:
和useState有相同的实现过程。
不同点:
- useState需要处理影响页面更新的数据,而在react fiber中将此类数据全部保存到memoizedState,对memoizedState的使用发送在react fiber的reconciler阶段
- useEffect的目的是在组件mounted后进行作用,fiber中将此类操作作为effect维护这一个链表,effect的触发过程发生在react fiber的commit阶段
useCallback
和useState的生成过程基本类似,不过生成的hook对象有点区别
var hook = {
memoizedState: [传入的callback,传人的更新依赖],
...
};
useCallback算是我个人比较喜欢的一个功能
class Stage extends React.Component{
handleClick = () => {
console.log('what are you 弄啥呢?')
}
render () {
return (
<>
<!-- 大多数情况下都会建议这个写法 -->
<div onClick={this.handleClick}>弄你</div>
<!-- 一般会吐槽这个写法 -->
<div onClick={() => this.handleClick()}>弄你</div>
</>
)
}
}
第一种写法保证执行render时属性onClick的值都相同;而第二种写法每次执行render都会生成一个新的函数,所以在diff时onClick每次都不同。
useCallback就用来帮助我们在functional组件中实现了第一种性能更优的方式
useMemo
和useState的生成过程基本类似,不过生成的hook对象有点区别
var hook = {
memoizedState: [计算过程的结果,传人的更新依赖],
...
useMemo同样是我个人比较喜欢的一个功能,在这之前一直希望有官方的支持,简单说就是对一个计算过程的结果进行缓存。使用过vue的同学可以把它想象成vue的computed属性(vue computed属性的数据响应和依赖缓存实现过程)。从这一点上看vue领先react好几年~~~~哈哈哈哈哈哈~~~~
hook的第二个参数
官方提供的hook api很多,其中有几个可以接受第二个参数(不传,或者是一个数组)。
作用:在某个依赖项改变时重新操作第一个参数
如果你使用过React.PureComponent就会知道,他通过对新旧props做一个浅比较来判断是否需要更新组件。这第二个参数的原理同样如此。
// 首先对deps做是否为空的判断
if (nextDeps !== null) {
var prevDeps = prevState[1];
// 然后比较新旧deps
if (areHookInputsEqual(nextDeps, prevDeps)) {
return prevState[0];
}
}
// 比较新旧deps
function areHookInputsEqual(nextDeps, prevDeps) {
if (prevDeps === null) {
return false;
}
// 对传入的数组成员做浅比较
for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
if (is(nextDeps[i], prevDeps[i])) {
continue;
}
return false;
}
return true;
}
其它hook
剩下的几个hook API大家有兴趣可以自行研读源码,实现过程基本和上面几个相同的思路
总结
最后想说的是没有黑魔法,如果你react的更新机制、fiber的过程、以及函数的特性有清晰的认识,理解hook也是很容易的。
这篇文章本质上也是一片源码解读类型的,但是很少涉及到一些具体实现。通过开篇的一个探索版本模糊认识hook的设计思路。所有这一切都是建立在reactv16版本fiber的优秀设计上。
作者:hailx
链接:https://juejin.im/post/5bf29eaee51d4523ec2637c6
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com