Build your own React_8 Hooks

Posted 2021-07-27 一只前端小马甲

前端工程师的要求越来越高，仅懂得“三大马车”和调用框架API，已经远不能满足岗位的能力要求。因此增强自身的底层能力，了解框架的内部原理非常重要。本系列文章，翻译自Rodrigo Pombo的《Build your own React》一文，同时每篇文章最后，都会加入自己的理解，一方面记录自己初探React框架原理的过程，另一方面也是想与各位大牛多多交流，以出真知。

我们打算从零开始重写一个React框架，在遵循源码架构的基础上，省略了一些优化和非核心功能代码。

假设你阅读过我之前的文章《build your own React》，那篇文章是基于React 16.8版本，当时还不能使用hooks来替代class。

你可以在Didact仓库找到那篇文章和对应的代码。这里还有个相同主题的视频，跟文章的内容有些区别的，但是可以参考观看。

从零开始重写React框架，我们需要遵循以下步骤：

• 步骤一：createElement函数
• 步骤二：render函数
• 步骤三：并发模式
• 步骤四：理解React纤维
• 步骤五：渲染和提交阶段
• 步骤六：调解器
• 步骤七：函数组件
• 步骤八：Hooks

步骤八：Hooks

最后一步。我们了解了函数组件，现在给函数组件增加state。

//const Didact = {
//	createElement,
//	render,
//}

/** @jsx Didact.createElement */
function App(props){
	return <h1>H1 {props.name}</h1>
}
const element = <App name="foo" />
const container = document.getElementById("root")
Didact.render(element, container)

现在把我们的组件变成经典的计数器组件。我当我们点击一下，计数器的state值加一。

//const Didact = {
//	createElement,
//	render,
	useState,
//}

/** @jsx Didact.createElement */
function Counter(){
	const [state, setState] = Didact.useState(1)
	return (
		<h1 onClick={()=>setState(c=>c+1)}>
			Count: {state}
		</h1>
	)
}
const element = <Counter />
//const container = document.getElementById("root")
//Didact.render(element, container)

注意我们在这里用Didact.useState获取和更新计数器的值。

下面是我们调用Counter函数的地方，我们同样在里面调用useState函数。

//			return nextFiber.sibling
//			}
//		nextFiber = nextFiber.parent
//	}
//}

function updateFunctionComponent(fiber){
	const children = [fiber.type(fiber.props)]
//	reconcileChildren(fiber, children)
}

function useState(initial){
	// TODO
}

//function updateHostComponent(fiber){
//	if(!fiber.dom){
//		fiber.dom = createDom(fiber)
//	}
//	reconcileChildren(fiber, fiber.props, children)

在调用函数组件时，我们需要初始化一些全局变量，以便于我们在useState中使用。

首先，我们需要设置渲染中的纤维（work in process fiber）。

我们同时需要对纤维增加一个hooks数组，用来保存当在同一个函数组件中调用多次setState的state。我们还保存着当前hook的索引。

//		}
//		nextFiber = nextFiber.parent
//	}
//}

let wipFiber = null
let hookIndex = null

function updateFunctionComponent(fiber){
	wipFiber = fiber
	hookIndex = 0
	wipFiber.hooks = []
//	const children = [fiber.type(fiber.props)]
//	reconcileChildren(fiber, children)
}

//function useState(initial){
	// TODO
//}

当函数组件调用useState，我们检查下是否有老的hook。我们通过纤维alternate属性中的hook索引来检查。

如果我们有老的hook，当调用useState没传入初始值，我们复制老的hook的状态值，传给新的hook。

然后我们给纤维增加一个新hook，把该hook的索引加一，并返回状态值。

//	reconcileChildren(fiber, children)
//}

function useState(initial){
	const oldHook = 
		wipFiber.alternate &&
		wipFiber.alternate.hooks &&
		wipFiber.alternate.hooks[hookIndex]
	const hook = {
		state: oldHook ? oldHook.state : initial,
	}
	
	wipFiber.hooks.push(hook)
	hookIndex++
	return [hook.state]
}

//function updateHostComponent(fiber){
//	if(!fiber.dom){

useState函数还要返回一个更新状态的函数，因此我们定义一个setState函数用于接收修改动作（计数器中的修改动作就是状态值加一）。

我们把修改动作入队列，该队列作为hook的一个属性。

然后我们做的事情跟在render函数中做的类似，设置一个新的渲染中的根节点，作为下一个渲染单元任务，这样我们的渲染循环就能开始一段新的渲染任务。

//	wipFiber.alternate.hooks[hookIndex]
	const hook = {
//		state: oldHook ? oldHook.state : initial,
		queue: [],
	}
	const setState = action => {
		hook.queue.push(action)
		wipRoot = {
			dom: currentRoot.dom,
			props: currentRoot.props,
			alternate: currentRoot,
		}
		nextUnitOfWork = wipRoot
		deletions = []
	}

//	wipFiber.hooks.push(hook)
//	hookIndex++
	return [hook.state, setState]
}

但是到这里我们还没有执行修改动作。

我们将在下次渲染组件时执行上个修改动作，我们通过老hook的队列获取了所有的修改动作，然后将它们一个个赋值给新hook的state，此时返回的状态都是更新过的。

//	wipFiber.alternate.hooks &&
//	wipFiber.alternate.hooks[hookIndex]
//	const hook = {
//		state: oldHook ? oldHook.state : initial,
//		queue: [],
//	}

	const actions = oldHooks ? oldHook.queue : []
	actions.forEach(action => {
		hook.state = action(hook.state)
	})
	
//	const setState = action => {
//		hook.queue.push(action)
//		wipRoot = {
//			dom: currentRoot.dom,
//			props: currentRoot.props,
//			alternate: currentRoot
//		}

React之旅到此结束了，我们已经构建了我们自己的React框架。

总结

步骤七，作者介绍了React函数组件的更新和删除的方法，对performUnitOfWork函数以及对应的commitWork函数做些修改。

步骤八则介绍了函数组件通过hook修改状态的具体实现，我们给纤维增加一个hook属性，保存了状态值和修改动作，每次用户产生了修改动作，会在下次函数组件渲染时执行，返回更新后的状态值。

到此我的翻译工作也告一段落，我在翻译期间不光自己对于React的理解更深了一些，还遇到了一起追求进步，探索知识的小伙伴，由衷体会到了导师信仰的佛家思想，“佛渡人也度己”。学无止尽，我们探索真理的道路也永不停止，后面我会继续在博客里面发些技术文章，努力保证质量，希望小伙伴们能多多提意见，咱们共同学习，共同进步。

上一篇传送门：Build your own React_7 函数组件